jquery-1.7.2滑动门,该怎么处理

2012-08-13

jquery-1.7.2滑动门各位大侠帮小弟看一看改一下JS代码jquery-1.7.2来源：http://jquery.com/HTML codescri

jquery-1.7.2滑动门
各位大侠帮小弟看一看改一下JS代码
jquery-1.7.2来源：http://jquery.com/

HTML code

<script type="text/javascript" src="images/js/jquery-1.7.2.js"></script>            <script>                    $(function(){                    $("#hztsMb div:not(:first)").hide();                    $("#hztitOp li").each(function(index){                    $(this).mouseover(                    function(){                    $("#hztitOp li.current").removeClass("hzcurrent");                    $(this).addClass("hzcurrent");                    $("#hztsMb > div:visible").hide();                    $("#hztsMb div:eq(" + index + ")").show();                    })                    })                    })            </script>                                <div class="hztitOp" id="hztitOp">                    <ul>                        <li class="hzcurrent"><a href="#">合作伙伴</a></li>                        <li><a href="#">友情链接</a></li>                    </ul>                </div>                              <div class="hztsMb" id="hztsMb">                      <div>合作伙伴  [color=#FF0000]我在这里在插入一个<DIV>这个DIV的内容不显示</DIV>[/color]</div>                      <div>友情接</div>                 </div>

如果一个页面有两个以上的滑动门，那么又要在加多一个以下代码，有没有办法，可以把以下的代码改成，在同一页面只要加一次以下代码，就可以增加N个滑动门呢

JScript code

            <script>                    $(function(){                    $("#hztsMb div:not(:first)").hide();                    $("#hztitOp li").each(function(index){                    $(this).mouseover(                    function(){                    $("#hztitOp li.current").removeClass("hzcurrent");                    $(this).addClass("hzcurrent");                    $("#hztsMb > div:visible").hide();                    $("#hztsMb div:eq(" + index + ")").show();                    })                    })                    })            </script>

[解决办法]

HTML code

<!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> 
 
[解决办法]
http://jqueryba.com/jquery/xuanxiangkaqiehuan/table.html
一般就这样整个 如果多次使用的话 那写成插件吧

热点排行

JavaScript

jquery-1.7.2滑动门,该怎么处理