文字无缝滚动效果：http://www.lanrentuku.com/js/qita-1038.html
手机背景：http://www.16sucai.com/2013/03/20157.html
音乐播放器：http://www.lanrentuku.com/js/shipin-926.html
1 楼
dengbenlong
2014-02-15
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<script src="frame/jquery-1.7.2.min.js"></script>
<style>
*{ margin:0; padding:0; font-size:12px}
body{ padding:30px}
ul,li{ list-style:none}
.menu{ width:500px;}
.menu li{ float:left; width:60px;height:24px; line-height:24px; margin-right:10px; background:#d8d8d8; text-align:center; cursor:pointer}
.menu li.selected{ background:#F30; color:#fff}
.menu li.selected:hover{ background:#F30; color:#fff}
.menu li:hover{ background:#666; color:#fff;}
.menu:after{ clear:both; content:""; display:block}
.box{ width:500px;height:100px; background:#fafafa; border:1px solid #d8d8d8; clear:both}
.box div{ width:500px;height:100px; line-height:40px; text-indent:2em; display:none}
</style>
<script type="text/javascript">
$(function(){
$('.menu li:first-child').addClass('selected');//特别显示第一个菜单
$('.box div:first-child').show();//显示对应的第一条div
$('.menu li').click(function(){//绑定事件
i=$(this).index();//获取当前点击的li，所对应的位置
$(this).addClass('selected').siblings().removeClass('selected');//slibings找到所有的同级元素li-注意不包括当前点击事件的li
$('.box div').eq(i).show();//找到li对应该 的box让其显示
$('.box div').not($('.box div').eq(i)).hide();//隐藏掉box里面其它的div
})
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li>财经</li>
<li>新闻</li>
<li>军事</li>
<li>体育</li>
</ul>
</div>
<div class="box">
<div>哎，要是我有大把的钱就好了</div>
<div>每天时时新闻</div>
<div>军事快报</div>
<div>这是体育文章</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡</title>
<script src="frame/jquery-1.7.2.min.js"></script>
<style>
*{ margin:0; padding:0; font-size:12px}
body{ padding:30px}
ul,li{ list-style:none}
.menu{ width:500px;}
.menu li{ float:left; width:60px;height:24px; line-height:24px; margin-right:10px; background:#d8d8d8; text-align:center; cursor:pointer}
.menu li.selected{ background:#F30; color:#fff}
.menu li.selected:hover{ background:#F30; color:#fff}
.menu li:hover{ background:#666; color:#fff;}
.menu:after{ clear:both; content:""; display:block}
.box{ width:500px;height:100px; background:#fafafa; border:1px solid #d8d8d8; clear:both}
.box div{ width:500px;height:100px; line-height:40px; text-indent:2em; display:none}
</style>
<script type="text/javascript">
$(function(){
$('.menu li:first-child').addClass('selected');//特别显示第一个菜单
$('.box div:first-child').show();//显示对应的第一条div
$('.menu li').click(function(){//绑定事件
i=$(this).index();//获取当前点击的li，所对应的位置
$(this).addClass('selected').siblings().removeClass('selected');//slibings找到所有的同级元素li-注意不包括当前点击事件的li
$('.box div').eq(i).show();//找到li对应该 的box让其显示
$('.box div').not($('.box div').eq(i)).hide();//隐藏掉box里面其它的div
})
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li>财经</li>
<li>新闻</li>
<li>军事</li>
<li>体育</li>
</ul>
</div>
<div class="box">
<div>哎，要是我有大把的钱就好了</div>
<div>每天时时新闻</div>
<div>军事快报</div>
<div>这是体育文章</div>
</div>
</body>
</html>