1.隔行变色
<script>
/*$('#table tr:even').css('background','#abcdef');
$('#table tr:odd').css('background','yellow');*/
$('#table tr').filter(':even').css('background','#abcdef').end().filter(':odd').css('background','yellow');
</script>2.tab标签页效果
<style>
#content div{
width:300px;
height:200px;
border:1px solid #abcdef;
display:none;
}
#content div.show{
display:block;
}
</style>
<body>
<ul id='ul' style='padding:0 15px;border:1px solid #abcdef;float:left;margin-right:3px;'>
<li class="current">php</li>
<li>ruby</li>
<li>java</li>
</ul>
<div id="content">
<div class="show">php......介绍</div>
<div>ruby......介绍</div>
<div>java......介绍</div>
</div>
</body>
<script>
var ul = document.getElementById('ul');
var li = document.getElementByTagName('li');
var content = document.getElementById('content');
var div = content.getElementByTagName('div');
for(var i = 0; i < li.length; i++){
li[i].index = i;
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';
}
};
</script>
//JQuery的写法
<script>
$('#ul li').click(function(){
//1/点击li时要切换样式
//$(this).addClass('current').siblings().removeClass('current');
//2.根据li的索引值来确定哪个div显示，其他div隐藏
$('#content>div').eq($(this).index()).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
});
</script>
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
