首页 > 代码库 > CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别

2024-07-14 00:56:50   223人阅读

在写一个TAB选项卡的时候遇到几个有意思的问题，记录下来

先把代码贴出来

<!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).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>

 

一、CSS优先级的问题。

这是效果图：

搜狗截图20140725142245

按照上述代码，选中状态下，鼠标放在‘体育’的 选项上，是没有hover效果的。

这是一个CSS优先级的问题。把

.tab li.hover{background: #C0C0C0}.tab li.selected{color: #fff;background: #6D84B4}

这两个调换一下顺序

.tab li.selected{color: #fff;background: #6D84B4}.tab li.hover{background: #C0C0C0}

就会有这种效果：

搜狗截图20140725143030

由此引出一个CSS优先级的问题，贴一篇文章，可以参考下http://spartan1.iteye.com/blog/1526735

二、eq()遍历方法和:eq()选择器的区别

在上述代码中，可以直接使用.eq(index)，

若要使用eq选择器则要写成:eq(‘+index+’)这样获取到的index才是变量。

这个问题有点意思，也debug了很久才查出来了问题…

jQuery推荐使用的方法是.eq(index)，相关讨论可以参考：

http://stackoverflow.com/questions/7563130/what-is-the-difference-between-eqindex-and-eqindex-in-jquery

http://stackoverflow.com/questions/10343150/the-jquery-eqindex-selector


联系
我们