WEB前端 -- 实例

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>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页