JQuery 实现选项卡的问题。


<div class="choice">
    <ul><li id="li1">11</li><li>22</li><li>33</li><li>44</li></ul>
        <div class="tab_box">
        <div>第一个选项卡</div>
            <div class="hidden"><a href=Default.aspx>第二个选项卡</a></div>
                <div class="hidden">第三个选项卡</div>
                <div class="hidden">第四个选项卡</div>
                </div>
    </div>

解决方案 »

  1.   


    $(document).ready(function() {
        $(".choice ul li").click(function() {
            $(this).addClass("selected").siblings().removeClass("selected");
            var index = $(".choice ul li").index(this);
            $(".tab_box > div").eq(index).show().siblings().hide();
        })
        .hover(function() {
            $(this).addClass("hover");
        }, function() {
            $(this).removeClass("hover");
        });
    })
      

  2.   

    CSS太业余了长了点···.body
    {
        width:900px;
        height:1720px;
        margin:0 auto;
        border:solid 1px #898989;
        }
    .header
    {
        margin-top:20px;
        }
        
    #upleft
    {
        float:left;
        width:280px;
        height:30px;
        border:1px solid #898989;
        margin-left:15px;
        margin-top:3px;
        }
        
    #upright
    {
        float:right;
        width:280px;
        height:30px;
        border:1px solid #898989;
        margin-top:3px;
        margin-right:15px;
        }
    .head
    {
        margin-left:15px;
        float:left;
        width:250px;
        height:60px;
        margin-top:15px;
        border:solid 1px #898989;
        }
    #head3
    {
        width:300px;
        float:right;
        margin-right:15px;
        }
        
    .choice
    {
        margin-top:10px;
        margin-left:30px;
        height: 135px;
    }
    .choice ul
        {
            margin-left:0px;
            margin-bottom:0px;
            }
    .choice ul li
    {
         float:left;
         margin-right:5px;
         width:90px;
         border:1px solid #898989;
         border-bottom:none;
         list-style:none;
         
        /* background-color:Aqua;  */
        }   .hidden
    {
        display:none;
        }
        
    .tab_box
    {
        clear:both;
        border: 1px solid #898989;
        float:left;
        width:700px;
        height:100px;
    }
    .middle
    {
        margin-left:15px;
        margin-top:5px;
        float:left;
        margin-right:5px;
        width:310px;
        height:400px;
        border: 1px solid #898989; 
    }
    #rmiddle
    {
        width:510px;
        float:right;
        margin-right:15px;
    }
    #rmiddle02
    {
        width:510px;
        float:right;
        margin-right:15px;
    }
    #rmiddle03
    {
        width:510px;
        float:right;
        margin-right:15px;
    }
    #foot
    {
        width:auto;
        height:100px;
        margin-left:15px;
        margin-right:15px;
        margin-top:15px;
        border: 1px solid #898989; 
     }
     .selected
    {
        cursor: pointer;
        background-color:Aqua;
    }
         
         .hover
         {
             cursor:pointer;
             background-color:Yellow;
         }
     
        
        
         
      

  3.   

    上边的HTML代码里面选项卡没问题。。可是这里就没反应了<body>
        <form id="form1" runat="server">
        <div class="body">
        <div class="header">
        <div class="updown" id="upleft"></div>
        <div class="updown" id="upright"></div>
        </div>
        <div style="height: 83px">
        <div class="head" id="head1"></div>
        <div class="head"></div>
        <div class="head" id="head3"></div>
        </div>
        <div class="choice">
        <ul><li id="li1">11</li><li>22</li><li>33</li><li>44</li></ul>
            <div class="tab_box">
            <div>11</div>
                <div class="hidden">22</div>
                    <div class="hidden">33</div>
                      <div class="hidden">44</div>
                    </div>
        </div>
        <div class="middle"></div>
        <div class="middle" id="rmiddle"></div>
        
        <div class="middle"></div>
        <div class="middle" id="rmiddle02"></div>
        
        <div class="middle"></div>
        <div class="middle" id="rmiddle03"></div>
        </div>
        
        </form>
    </body>
      

  4.   

    <html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
        <style>
    .body
    {
      width:900px;
      height:1720px;
      margin:0 auto;
      border:solid 1px #898989;
      }
    .header
    {
      margin-top:20px;
      }
        
    #upleft
    {
      float:left;
      width:280px;
      height:30px;
      border:1px solid #898989;
      margin-left:15px;
      margin-top:3px;
      }
        
    #upright
    {
      float:right;
      width:280px;
      height:30px;
      border:1px solid #898989;
      margin-top:3px;
      margin-right:15px;
      }
    .head
    {
      margin-left:15px;
      float:left;
      width:250px;
      height:60px;
      margin-top:15px;
      border:solid 1px #898989;
      }
    #head3
    {
      width:300px;
      float:right;
      margin-right:15px;
      }
        
    .choice
    {
      margin-top:10px;
      margin-left:30px;
      height: 135px;
    }
    .choice ul
      {
      margin-left:0px;
      margin-bottom:0px;
      }
    .choice ul li
    {
      float:left;
      margin-right:5px;
      width:90px;
      border:1px solid #898989;
      border-bottom:none;
      list-style:none;
      
      /* background-color:Aqua; */
      }   .hidden
    {
      display:none;
      }
        
    .tab_box
    {
      clear:both;
      border: 1px solid #898989;
      float:left;
      width:700px;
      height:100px;
    }
    .middle
    {
      margin-left:15px;
      margin-top:5px;
      float:left;
      margin-right:5px;
      width:310px;
      height:400px;
      border: 1px solid #898989;  
    }
    #rmiddle
    {
      width:510px;
      float:right;
      margin-right:15px;
    }
    #rmiddle02
    {
      width:510px;
      float:right;
      margin-right:15px;
    }
    #rmiddle03
    {
      width:510px;
      float:right;
      margin-right:15px;
    }
    #foot
    {
      width:auto;
      height:100px;
      margin-left:15px;
      margin-right:15px;
      margin-top:15px;
      border: 1px solid #898989;  
     }
     .selected
    {
      cursor: pointer;
      background-color:Aqua;
    }
        
      .hover
      {
      cursor:pointer;
      background-color:Yellow;
      } </style>    <body >  
    <form id="form1" runat="server">
      <div class="body">
      <div class="header">
      <div class="updown" id="upleft"></div>
      <div class="updown" id="upright"></div>
      </div>
      <div style="height: 83px">
      <div class="head" id="head1"></div>
      <div class="head"></div>
      <div class="head" id="head3"></div>
      </div>
      <div class="choice">
      <ul><li id="li1">11</li><li>22</li><li>33</li><li>44</li></ul>
      <div class="tab_box">
      <div>11</div>
      <div class="hidden">22</div>
      <div class="hidden">33</div>
      <div class="hidden">44</div>
      </div>
      </div>
      <div class="middle"></div>
      <div class="middle" id="rmiddle"></div>
        
      <div class="middle"></div>
      <div class="middle" id="rmiddle02"></div>
        
      <div class="middle"></div>
      <div class="middle" id="rmiddle03"></div>
      </div>
        
      </form>
        
            
            <script>
            $(document).ready(function() {
      $(".choice ul li").click(function() {
      $(this).addClass("selected").siblings().removeClass("selected");
      var index = $(".choice ul li").index(this);
      $(".tab_box > div").eq(index).show().siblings().hide();
      })
      .hover(function() {
      $(this).addClass("hover");
      }, function() {
      $(this).removeClass("hover");
      });
    })
        </script>
        </body>
    </html>  我试了下~·没有问题，能正常切换~·
      

  5.   

    纯js的选项卡，可以自己用jquery框架改改。 js选项卡（Tabs）