jquery选项卡(gt，eq选择器，click，hover方法siblings属性)

huiqinbo

浏览: 333308 次
性别:
来自: 北京

最近访客更多访客>>

薛宝钗的猫

iamjustlyl

A741841403

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

今天做高德的项目用到 Jquery【选项卡】技术，所以重新温习一下：

//选项卡
	$('.stage_Tab .tabList li').click(function(){
		var index=$(this).index();
		alert(index);
		$(this).addClass('active').siblings('li').removeClass('active');
		$('.tabCont .tabItem:eq('+index+')').show().siblings().hide();
		//$("#main",parent.document).height(document.body.scrollHeight);
	});

**************************************************************************************************************************

css 参数：

//鼠标移到上面是显示手型
cursor:pointer

jquery 的函数:

siblings //兄弟节点，同胞元素

:eq()选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。
语法
$(":eq(index)")
参数     描述
index     必需。规定元素的 index 值。

:gt选择器选取 index 值高于指定数的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之后的元素
语法
$(":gt(index)")
参数     描述
index
必需。规定要选择的元素。
会选取 index 值大于指定数的元素。

实例源码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    //等待加载完毕
    $(document).ready(function(){
        //gt是jquery选择器，选择类名等于.ct并且大于0的元素自动隐藏
        $('.ct:gt(0)').hide();
              
        //定义一个变量ywf,把.box ul li 赋予ywf;
        var ywf = $('.box ul li');
        //鼠标移到ywf上时显示的效果，定义一个ywf的hover方法
        ywf.hover(function(){
            $(this).addClass('two').siblings().removeClass('two');
            })
        //定义一个ywf 的点击方法     
        ywf.click(function(){
            //当.box ul li 被点击时添加一个one属性，同事移除该li的同胞属性
            $(this).addClass('one').siblings().removeClass();
            //eq是jquery的选择器，对应值是：index(0 1 2...)
            //.ct类选择ywf一样的index（0 1 2...，比如点击了ywf的index2,那么.ct
            //类就选择index 2）显示，同事隐藏同胞们的index;
            $('.ct').eq(ywf.index(this)).show().siblings().hide();
                  
            })
              
              
        });
      
</script>
  
<style type="text/css">
* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
ul { list-style-type:none;}
.box ul { height:30px; line-height:30px;}
.box ul li { float:left; padding:0 10px; position:relative; cursor:pointer; border:1px solid #000; margin-right:5px; border-bottom:none;}
  
.box ul li.two { background:orange;}
  
  
  
.content { width:325px; border:1px solid #000; padding:10px; height:100px;}
  
* html .content { margin-top:-1px;}
  
  
.box ul li.one { background:#fff;}
  
  
  
  
  
</style>
  
  
</head>
  
<body>
  
<div class="box">
<ul>
<li class="one">课程介绍</li>
<li>报名流程</li>
<li>常见问题</li>
</ul>
<div class="content">
<div class="ct"> 随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，PHP语言已经为大部分企业广泛应用和重 视（如：新浪、百度、腾讯、TOM、淘宝、搜狐、网易等）PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显，未来发展空间巨大，IT行 业急需PHP开发人才。 </div>
<div class="ct"> 这里有后盾名学员对后盾网视频的评价,来后盾培训是你一生不悔的选择.用一个比喻来讲:后盾网实训课程不光是教你怎样开汽车,更是传授你如何制造汽车的技 能.让学员自己能开发一个完整的框架产品,从深层次上掌握PHP的应用,这是后盾独有的。 </div>
<div class="ct">PHP主讲老师具有多年项目开发经验及企业培训经验，打造企业需要的人才. 就业老师提供给学员职业素质、职业经验、职业技能等全方位就业指导。 </div>
  
  
</div>
  
  
</div>
  
</body>
</html>