用jquery或Js 如何实现【选项卡】功能

本帖最后由 shijianyu00 于 2011-08-24 21:30:28 编辑

解决方案 »

  1.   

    <!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=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .a{ color:#F00;}
    .b{ color:#000; }.c{ display:block;}
    .d{ display:none;}
    </style>
    <script type="text/javascript">
    function tabs(id,a1,a2,d1,d2){
       var tabs = document.getElementById(id);
       var spans = tabs.getElementsByTagName('span');
       var divs = tabs.getElementsByTagName('div');
       for(var i = 0; i < spans.length; i ++) {
       spans[i].onclick = function() {
       if (this.className != a1) {
       var index = 0;
       for(var j = 0; j < spans.length; j ++) {
       spans[j].className = a2;
       if (spans[j] === this) index = j;
       divs[j].className = d2;
       }
       this.className = a1;
       divs[index].className = d1;
       }
       }
       }
    }
    window.onload = function() {
    tabs('tabs', 'a', 'b', 'c', 'd');
    }
    </script>
    </head><body><!--class = a为 连接a 点击后的样式, b = 正常样式-->
    <div id="tabs">
      <span class="a">选项卡1</span>
      <span class="b">选项卡2</span>
      <span class="b">选项卡3</span>
      <!--class = c为 div 显示样式，d=隐藏样式-->
      <div class="c">内容1</div>
      <div class="d">内容2</div>
      <div class="d">内容3</div>
    </div></body>
    </html>