例子：选项卡效果

标签：

<div style="width:700px; height:500px; margin-top:30px">
 
    <div id="menu">
     <div class="list" style="娱乐</div>
        <div class="list" style="社会</div>
        <div class="list" style="体育</div>
        <div class="list" style="军事</div>
    </div>
    
   <div id="d1" class="nr" style=""background-color:#3C0">
     娱乐新闻
    </div>
   
    <div id="d2" class="nr" style=" background-color:#399;display:none">
     社会新闻
    </div>
    <div id="d3" class="nr" style="background-color:#F30; display:none">
     体育新闻
    </div>
    <div id="d4" class="nr" style=" background-color:#CF3;display:none">
     军事新闻
    </div>
   
</div>

<script type="text/javascript">
 
 function Show(id)
 {
  //隐藏所有
  var attr = document.getElementsByClassName("nr");
  for(var i=0;i<attr.length;i++)
  {
   attr[i].style.display = "none";
  }
  //显示当前的
  document.getElementById(id).style.display = "block";
 }
 
</script>

例子：选项卡效果

标签：

原文地址：http://www.cnblogs.com/l5580/p/5909219.html