求用jquery实现tab切换效果

最近刚学jquery，了解不深，我现在想通过点击上面的标题12345显示下面对应的内容，不知道怎么实现，求帮助
<div class="maintab">
<ul class="tabtitle">
<li class="tabhover"><a href="#">选择标题1</a></li>
    <li><a href="#">选择标题2</a></li>
    <li><a href="#">选择标题3</a></li>
    <li><a href="#">选择标题4</a></li>
    <li><a href="#">选择标题5</a></li>
</ul><div class="tabcontent">
选择内容1
</div>
<div class="tabcontent"  style="DISPLAY: none">
选择内容2
</div>
<div class="tabcontent"  style="DISPLAY: none">
选择内容3
</div>
<div class="tabcontent"  style="DISPLAY: none">
选择内容4
</div>
<div class="tabcontent"  style="DISPLAY: none">
选择内容5
</div>
</div>

解决方案 »

  1.   


    $('.tabtitle li').click(function () {
        var index = $(this).index();
        $(this).addClass('tabhover').siblings('li').removeClass('tabhover');
        $('.tabcontent').eq(index).show().siblings('.tabcontent').hide();
    });
      

  2.   


    $(function(){
    $("a").each(function(i){
       $(this).bind("click",{ind:i},function(e){
          var el = $(".tabcontent ").eq(i);
          el.eq(i).show(e.data.ind);
          el.siblings().hide(); 
      });
    });
    });
      

  3.   

    更正下 el.eq(i).show(e.data.ind); 改为 el.eq(e.data.ind).show();$(function(){
    $("a").each(function(i){
       $(this).bind("click",{ind:i},function(e){
          var el = $(".tabcontent ").eq(i);
          el.eq(e.data.ind).show();
          el.siblings().hide(); 
      });
    });
    });
      

  4.   

    我想问下你代码中的：{ind:i}是什么意思？ 我看不明白。
      

  5.   

    <script src='jquery-1.4.4.min.js'></script>
     <SCRIPT language=JavaScript type=text/javascript>         
    $(function() {             
    $(".tabtitle li").each(function(index) {
                    
    $(this).mouseover(function() {

    hiddenall();                     
    $("#changedlist > div:eq(" + index + ")").css("display","");                 
    });
                
     });             
    function hiddenall() {              
      $("#changedlist > div").css("display", "none");             
    };         
    }); 
    </SCRIPT>
    <div class="maintab">
    <ul class="tabtitle">
       <li class="tabhover"><a href="#">选择标题1</a></li>
       <li><a href="#">选择标题2</a></li>
       <li><a href="#">选择标题3</a></li>
       <li><a href="#">选择标题4</a></li>
       <li><a href="#">选择标题5</a></li>
    </ul>
    <div id ="changedlist">
    <div class="tabcontent">
    选择内容1
    </div>
    <div class="tabcontent" style="DISPLAY: none">
    选择内容2
    </div>
    <div class="tabcontent" style="DISPLAY: none">
    选择内容3
    </div>
    <div class="tabcontent" style="DISPLAY: none">
    选择内容4
    </div>
    <div class="tabcontent" style="DISPLAY: none">
    选择内容5
    </div>
    </div>
    </div>
      

  6.   

    <script type="text/javascript">
            $(document).ready(function () {
                $(".tabtitle li").click(function () {
                    $(this).addClass("tabhover").siblings().removeClass("tabhover");
                    $('.tabcontent').eq($(this).index()).show().siblings().hide();
                });
            });
    </script>
      

  7.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;chartset=gb2312" />
    <title>Test</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css"><!--
    .wrapper {
    margin:100px auto;
    width:400px; height:200px;
    border:1px solid #ddd;
    }
    .head {
    background:#ddd; height:26px; line-height:26px;
    border-bottom:1px solid #999;
    }
    .head li{
    float:left;
    width:60px;
    font-size:14px; text-align:center; cursor:pointer;
    }
    .head .on {
    position:relative;
    _top:1px; left:1px;
    border:1px solid #999; border-bottom:none;
    background:#fff; font-weight:bold; 
    }
    .con {
    clear:left; padding:10px;
    }
    .con li {
    display:none;
    }
    .con .on {
    display:block;
    }
    -->
    </style>
    </head>
    <body>
    <div class="wrapper" id="test">
    <ul class="head">
    <li class="on">ASP</li>
    <li>PHP</li>
    <li>SEO</li>
    </ul>
    <ul class="con">
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    </div>
    <script>
    $('#test ul.head li').click(function(){
    $(this).addClass('on').siblings().removeClass('on');
    $('.con > li').eq( $(this).index() ).show().siblings().hide();
    })
    </script>
    </body>
    </html>
    参考下