在写一个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. Codeforces Round #337 (Div. 2) A水

    A. Pasha and Stick time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  2. CCPC-Winter Camp div2 day5

    DIV2 有部分div1的题会写 div1的大佬真的太强了 向他们学习 (好像和zqc大佬说过话了hhh,zqc大佬真的是一个超有意思的人啊,羡慕有妹子队友的zqc大佬) A: 你有一棵树,你想把它画 ...

  3. squid总结

    squid可以完成的工作: 代理服务器 反向代理服务器 防火墙 缓存功能 透明代理 squid和varnish的对比,以及squid的优缺点说明: 缓存到硬盘,容易遇到I/O瓶颈 V3.2以下不支持多 ...

  4. ssm项目,web容器无法初始化项目

    在web.xml中配置加载spring时,发现项目无法运行:而去掉spring的配置时,项目可以被初始化. 此时应考虑到spring的配置文件中存在错误,以至于web容器无法对项目成功初始化,在web ...

  5. Robot Framework Chrome

    1. 下载对应版本的chromedriver, 好像都是windows32位的,不过没关系,可以用即可. 2. 将chromedriver放入到chrome的安装路径下,然后将chromrdriver ...

  6. 解决vue代码缩进报错问题 关闭ESlint

    前言 使用vue-cli来构建单页SPA应用,提示代码缩进报错 原因分析 通过查看package.json文件我们可以发现,在文件中默认安装了eslint-loader模块,eslint-loader ...

  7. new操作符(翻译自mozilla.org)

    翻译自:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new new操作符可以实例化一个用户自 ...

  8. https 多路复用的理解~转载

    https://segmentfault.com/q/1010000005167289 这里面的http/2连接是指tcp/ip层的连接还是http应用层(也就是我们平常在chrome F12 net ...

  9. linux驱动基础系列--Linux 串口、usb转串口驱动分析

    前言 主要是想对Linux 串口.usb转串口驱动框架有一个整体的把控,因此会忽略某些细节,同时里面涉及到的一些驱动基础,比如字符设备驱动.平台驱动等也不进行详细说明原理.如果有任何错误地方,请指出, ...

  10. Laravel 5.2 整合 Uploadify 上传图片

    前端: <!-- 引入CSS.JS --> <link rel="stylesheet" type="text/css" href=" ...