JQ 选项卡

最新推荐文章于 2021-09-08 16:28:21 发布

iteye_17658

最新推荐文章于 2021-09-08 16:28:21 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏：阅-JQ3 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82651347

阅-JQ3 专栏收录该内容

43 篇文章

订阅专栏

本文介绍如何使用HTML、CSS及jQuery实现简单的Tab切换效果。通过为不同的内容区域设置显示与隐藏状态，并利用样式调整按钮外观，实现美观且交互良好的Tab面板功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style.css

*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
//<![CDATA[
$(function(){
    var $div_li =$("div.tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass("selected") //当前<li>元素高亮
               .siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
        var index =  $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
        $("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
                .eq(index).show() //显示 <li>元素对应的<div>元素
                .siblings().hide(); //隐藏其它几个同辈的<div>元素
    }).hover(function(){
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    })
})
//]]>
</script>
</head>
<body>
<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box">
        <div>时事</div>
        <div class="hide">体育</div>
        <div class="hide">娱乐</div>
    </div>
</div>
</body>
</html>

效果图：