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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-07-12 10:47:40 2404 1

写一个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>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:54:45

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

    0 0
相关问答

1

回答

jquery定时遍历元素的问题

2016-03-26 11:52:05 1785浏览量 回答数 1

1

回答

jquery ajax 跨域请求后,同步设置会无效,求设置同步的方法

2020-05-28 09:18:27 328浏览量 回答数 1

1

回答

如何使用jQuery / AJAX和PHP / MySQL根据选择的第一个下拉列表填充第?mysql

2020-05-17 14:23:46 335浏览量 回答数 1

1

回答

使用Jquery Ajax从Mysql检索数据

2020-05-10 21:40:48 394浏览量 回答数 1

1

回答

axios,fetch,ajax(jquery)的区别 vuex是什么?怎么使用?哪种场景使用它?

2020-02-17 15:45:45 341浏览量 回答数 1

1

回答

Bootstrap2不能用JQuery AJAX方式提交表单吗?

2020-01-07 13:24:48 703浏览量 回答数 1

1

回答

使用jQuery .ajax()PUT请求API无效

2020-01-04 19:19:11 1240浏览量 回答数 1

1

回答

面试之jquery中的ajax方法参数

2019-12-16 14:53:24 1548浏览量 回答数 1

1

回答

【JavaScript基础】axios与jQuery中的ajax有什么不同?

2019-11-23 19:57:59 393浏览量 回答数 1

1

回答

jquery mobile ajax 请求,弹出提示框

2016-07-05 17:07:35 2063浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载