在写一个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优先级的问题。

这是效果图：

按照上述代码，选中状态下，鼠标放在‘体育’的 选项上，是没有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}

就会有这种效果：

由此引出一个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

还有一篇不错的选择器进阶文章：http://www.qingdou.me/2344.html

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

  1. jQUery中的$(document).ready()方法和window.onload()方法的区别

    1.常规的Javascript代码中,通常使用window.onload方法 window.onload = function(){//代码} 2.jquery中,则使用$(document).rea ...

  2. jQuery中focusin()和focus()、find()和children()的差别

    jQuery中focus()和focusin().focus()和children()的差别 focus()和focusin() focus()和focusin()的差别在于focusin()支持事件 ...

  3. jQuery中的append()和prepend(),after()和before()的差别

    jQuery中的append()和preappend(),after()和before()的差别 append()和prepend() 如果 <div class='a'> //<- ...

  4. Object类中wait代餐方法和notifyAll方法和线程间通信

    Object类中wait代餐方法和notifyAll方法 package com.yang.Test.ThreadStudy; import lombok.SneakyThrows; /** * 进入 ...

  5. JS和jQuery中ul li遍历获取对应的下角标

    首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...

  6. jQuery中使用$.each()遍历数组时要注意的地方

    使用jQuery中 $.each()遍历数组,要遍历的数组不能为空(arry!="") 例如:           $.each(arry, function (i, item)  ...

  7. 写的非常好的文章 C#中的委托，匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  8. jquery中的index方法和eq方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数,如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位 ...

  9. jquery 中 eq()遍历方法 和:eq()选择器的区别

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. tomcat7 access log设置

    位置:${tomcat_home}/conf/server.xml <Valve className="org.apache.catalina.valves.AccessLogValv ...

  2. UVA 11922 Splay tree

    UVA 11922 题意: 有n个数1~n 操作a,b表示取出第a~b个数,翻转后添加到数列的尾部 输入n,m 输入m条指令a,b 输出最终的序列 代码: #include<iostream&g ...

  3. 使用Android Studio调试UiAutomator过程中遇到的问题

    声明: 这里纪录了个人学习和使用Android Studio调试UiAutomator过程中遇到遇到的问题,不定时进行更新,欢迎一起交流学习 1.Excution faild for task ‘:a ...

  4. 【JSP EL】EL表达式获取当前时间（两种方式）

    第一种方式: //先在代码段定义<% long date = new Date().getTime(); request.setAttribute("date", date) ...

  5. 51Nod 1087 1 10 100 1000 | 数学

    Input示例 3 1 2 3 Output示例 1 1 0 #include "bits/stdc++.h" using namespace std; #define LL lo ...

  6. mysql 并发下数据不一致的问题分析及解决

    MySQL 5.6 , InnoDB存储引擎,默认事务隔离级别(REPEATABLE-READ) 初始sql 脚本如下: CREATE DEFINER=`root`@`localhost` PROCE ...

  7. Item 1----------考虑用静态工厂方法代替构造器

    读书,有时候,我感觉总是有点绕和不具体.我阅读了代码,理解代码后,才有一种理解和把握的感觉. 优点三.   把某个对象的构建放给客户端来实现. 比如下面的实现,客户端Test,获取Service的实例 ...

  8. 【洛谷 P1129】 [ZJOI2007]矩阵游戏 （二分图匹配）

    题目链接 看到题目肯定首先会想到搜索. 然鹅数据范围\(n<=200\)这么大(其实也不算太大),肯定是不行的. 如果\((i,j)\)是\(1\),从\(i\)向\(j\)连一条边,表示第\( ...

  9. 破解邻居家的wifi密码

    刚刚学习了如何破解wifi密码 然后昨天晚上连续破解了两个 好激动 我是在ubuntu上面使用aircrack-ng套件进行破解的 首先进行抓包,然后跑字典就ok了 下面的不错 一.关闭网络和结束可能 ...

  10. perl6中的替换

    use v6; =begin pod perl6 中的替换用S/// S有几个可选参数: :g —(长形式::global)全局匹配:替换掉所有的出现 :i —不区分大小写的匹配 :ii —(长形式: ...