您的位置：首页 > Web前端 > JQuery

jquery的学习笔记，天天要努力，基础基础

2013-12-11 00:00 555 查看

摘要: jquery的学习笔记，天天要努力，基础基础

<html>
<head>

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<title>原生js的tab标签</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px;
}

#ul{
height: 30px;
margin-bottom: 10px;

}
#ul li{
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current{
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show{
display: block;
}

</style>
</head>
<body>
<ul id="ul">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>

<div id="content">
<div class="show">php.........介绍</div>
<div>ruby.........介绍</div>
<div>python.........介绍</div>
</div>
<script>
//原生js实现方法

// var ul=document.getElementById('ul');
// var li=ul.getElementsByTagName('li');
// var content=document.getElementById('content');
// var div=content.getElementsByTagName('div');
// for (var i =0; i< li.length;  i++ ) {
// 	li[i].index=i;
// 	//alter(li[i].index);
// 	//document.write(li[i].index);
//  	 li[i].onclick=function(){
//   	for (var i =0;i< li.length ; i++) {
//   		li[i].className='';
//   		div[i].style.display='none';
//   	};
//   	 this.className='current';
//   	div[this.index].style.display='block';
//   	//document.write(this.index);
//   };
//  };

// jquery 实现方法

$('#ul li').click(function(){

$(this).addClass('current').siblings().removeClass('current');
$('#content>div').eq($(this).index()).show().siblings().hide();

})

//选择器的优化
//1.优先使用id选择器  2在class选择器前面添加标签名 $(p.a) 3采用find 而不使用上下文查找 4链式操作要更快
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航