jquery的eq()遍历和选择器:eq()造成的结果不同-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery的eq()遍历和选择器:eq()造成的结果不同

a123456678 2016-07-12 10:47:40 1696

写一个tab选项卡,遇到一个问题

若是
$('div.tab_box > div')

            //选取子节点
                .eq(index).show()
                .siblings().hide();

这样写就可以实现tab切换的效果,
若是 $('div.tab_box > div:eq(index)')

                 .show()
                 .siblings().hide()

就不能切换。
全部代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>TAB选项卡</title>
    <style>
        *{padding: 0;margin: 0;}
        body{font: normal 14px/1.5em Arial}
        #center{margin: 0 auto;width: 300px;position: relative;top: 50px;}
        .tab li{width: 50px;height: 25px;font: normal 12px/25px Arial;float: left;background: #F1F1F1;text-align: center;border: 1px solid #ccc;list-style: none;margin-right: 5px;cursor: pointer;
            -moz-border-radius: 15% 15% 0 0;
            -webkit-border-radius: 15% 15% 0 0;
            border-radius: 15% 15% 0 0;
            /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
        }
        .tab_box{width: 300px;height: 200px;border: 1px solid #ccc;clear: both;}
        .tab li.hover{background: #C0C0C0}
        .tab li.selected{color: #fff;background: #6D84B4}
        .hide{display: none;}
    </style>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.tab ul li').click(function() {
                $(this).addClass('selected')
                // 元素高亮
                       .siblings().removeClass('selected');
                //去掉同辈元素高亮
                var index = $('.tab ul li').index(this);
                //获取当前点击的<li>元素在全部 li 元素中的索引
                $('div.tab_box > div:eq(index)')
                //选取子节点
                    // .eq(index).show()
                    .siblings().hide();
            }).hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
             
        });
    </script>
</head>
<body>
<div id="center">
    <div class="tab">
    <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>
XML JavaScript 数据格式 索引
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:54:45

    $('div.tab_box > div:eq('+index+')')

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程