jquery实现的网页选项卡(拾忆)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>网页选项卡</title>

    <style>

        *{ margin:0; padding:0;}

        body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}

        .tab { width:440px;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}

    </style>

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

<script src="js/jquery.js"></script>

<script>

    //为li元素绑定单击事件

    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")//选择子节点

                .eq(index).show()//显示<li>元素对应的<div>元素

                .siblings().hide();//隐藏其他几个同辈的<div>元素

    }).hover(function(){

        $(this).addClass("hover");

    },function(){

        $(this).removeClass("hover");

    })

</script>

</body>

</html>
秒客网

jquery实现的网页选项卡(拾忆)

相关文章
