jquery-1.7.2滑动门

本帖最后由 cngdjws 于 2012-07-17 20:33:31 编辑

解决方案 »

  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>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $("div:not(:first)", "div.content").hide();
    $("div.tab li").mouseover( function() {
    $(this).parents("div.tab").find("li").removeClass("hzcurrent").end().end().addClass("hzcurrent");
    $(this).parents("div.tab").next("div.content").children().hide().eq($(this).index()).show();
    });
    });
    </script>
    </head><body>
    <div class="tab">
    <ul>
         <li class="hzcurrent">111</li>
            <li>222</li>
        </ul>
    </div>
    <div class="content">
    <div>CONTENT111</div>
        <div>CONTENT222</div>
    </div><div class="tab">
    <ul>
         <li class="hzcurrent">333</li>
            <li>444</li>
        </ul>
    </div>
    <div class="content">
    <div>CONTENT333</div>
        <div>CONTENT444</div>
    </div>
    </body>
    </html>
      

  2.   

    http://jqueryba.com/jquery/xuanxiangkaqiehuan/table.html
    一般就这样整个 如果多次使用的话 那写成插件吧 
      

  3.   

    T5500  太感谢谢你了！要的就是这样的效果   虽然 qishuai1986 的方法，我不太懂，不过也谢谢你！
      

  4.   

    T5500还有一个小问题，就是在div>CONTENT111在加入一个<div>在这里加的DIV的内容不会显示出来，能不能在帮忙修改一下呢</div></div>  
      

  5.   

        //$("div:not(:first)", "div.content").hide(); //问题出在这行代码
    $("div.content").children("div:not(:first)").hide();