jquery中简易tab切换

最新推荐文章于 2021-04-24 09:15:48 发布

刀尖的舞者

最新推荐文章于 2021-04-24 09:15:48 发布

阅读量160

点赞数

分类专栏：前端文章标签： js

原文链接：https://www.mk2048.com/blog/blog.php?id=h12ak00ii1aa&title=jquery%E4%B8%AD%E7%AE%80%E6%98%93tab%E5%88%87%E6%8D%A2

版权

前端专栏收录该内容

280 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<title>test</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div class="tabs">
    <ul id="tabs">
        <li class="tab-nav">管理导航</li>
        <li class="tab-nav-action">系统设置</li>
        <li class="tab-nav">用户管理</li>
        <li class="tab-nav">内容管理</li>
        <li class="tab-nav">其他管理</li>
    </ul>
</div>
<div id="tabs-body" class="tabs-body">
    <div style="display:block">
    1111111
    </div>
    <div style="display:none">
    222222222
    </div>
    <div style="display:none">
    33333333333
    </div>
    <div style="display:none">
    4444444444
    </div>
    <div style="display:none">
    555555555555555
    </div>
</div>
<script type="text/javascript">
$(document).ready(function (){
    $('#tabs li').hover(function(){
    	var index = $(this).index();
        var divs = $('#tabs-body').find('div');
        $('#tabs li').removeClass('active');
        $(this).addClass('active');
        divs.hide();//隐藏所有选中项内容
        divs.eq(index).show(); //显示选中项对应内容
    });
});
</script>
另外一种：

<script type="text/javascript">
$(document).ready(function (){
    $('#tabs').find('li').click(function(){ //使用find()获取元素效率更高
    	var index = $(this).index();
    	$('#tabs').find('li').removeClass('active');
    	$(this).addClass('active');
    	$("#tabs-body").find("div").eq(index).show().siblings().hide();
    });
});
</script>