jquery-1.7.2滑动门

从此不换网名 2012-07-17 08:29:06

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



<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>合作伙伴  我在这里在插入一个<DIV>这个DIV的内容不显示</DIV></div>

                      <div>友情接</div>

                 </div>

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





			<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>

...全文

404 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

从此不换网名 2012-07-31

打赏
举报

T5500现在才发现双出现了新的问题，就是在一个页面有几个滑动门的时候，其它滑动门的第一个内容都不会显示，只有鼠标移过后会显示，能不能帮我改一下

从此不换网名 2012-07-23

打赏
举报

T5500 在次感谢

乌镇程序员 2012-07-21

打赏
举报

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

	$("div.content").children("div:not(:first)").hide();

从此不换网名 2012-07-19

打赏
举报

在顶一下，走过路的大虾在帮改一下

从此不换网名 2012-07-18

打赏
举报

T5500还有一个小问题，就是在

div>CONTENT111在加入一个<div>在这里加的DIV的内容不会显示出来，能不能在帮忙修改一下呢</div></div>

从此不换网名 2012-07-18

打赏
举报

T5500 太感谢谢你了！要的就是这样的效果

虽然 qishuai1986 的方法，我不太懂，不过也谢谢你！

123456789@qq.com 2012-07-18

打赏
举报

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

乌镇程序员 2012-07-17

打赏
举报

<!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>