超简单的JQUERY tab菜单

最新推荐文章于 2024-09-17 11:42:54 发布

baisha0363640

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sshnwl/p/3446825.html

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAB菜单</title>
<script language="javascript" src="jquery.js"></script>
 
<style type="text/css">
#tab{width:300px; height:300px;}
#tab ul{margin:0px; padding:0px; list-style:none; background:#999; height:25px;}
#tab ul li{display:inline-block; border:1px solid blue; width:30%; text-align:center;}
.current{background:#39C;}
#tab div{ width:100%; height:250px;}
.hide{display:none;}
</style>
<script language="javascript">
$(function(){
var tli = $('#tab ul li');
var tdiv = $('#tab div');
 
tli.click(function(){
    $(this).addClass('current').siblings().removeClass('current');
    var i = $(this).index();
    tdiv.eq(i).show().siblings('div').hide();
     
    }) 
     
})
</script>
</head>
 
<body>
 
<div id="tab">
<ul>
<li class="current">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<div class="c1">这是第一个的内容</div>
<div class="c2 hide">这是第二个的内容</div>
<div class="c3 hide">这是第三个的内容</div>
</div>
</body>
</html>