jQuery应用操作之---网页选项卡(tabs)

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30667649

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量55

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hunterCecil/p/5664720.html

版权

示例：

<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>

需求：为<li>元素绑定单击事件，将当前单击的<li>元素高亮，然后去掉其他同辈<li>元素的高亮，同时切换选项卡内容。
代码如下：

var $div_li = $("div.table_menu ul li");
$div_li.click(functijon(){
    $(this).addClass("selected") //当前<li>高亮
        .siblings().removeClass("selected"); //其他同辈<li>去掉高亮
    var index = $div_li.index(this); //获取当前点击<li>在所有<li>中的索引
    $("div_tab_box>div") //选取子节点
        .eq(index).show(); //显示当前<li>对应的tab内容
        .siblings().hide();	//隐藏其他同辈<li>对应的tab内容
});

转载于:https://www.cnblogs.com/hunterCecil/p/5664720.html