jquery tab菜单问题：用jquery插件实现了tab菜单，接下来想实现当点击别处链接时打开对应的tab菜单。
用jquery插件实现了tab选项卡（菜单），tab菜单包含两个tab，一个是注册，一个是登录。想实现的功能是：当点击首页上的登录或注册时能打开相应的登录或注册tab菜单...
用jquery插件实现了tab选项卡（菜单），tab菜单包含两个tab，一个是注册，一个是登录。想实现的功能是：当点击首页上的登录或注册时能打开相应的登录或注册tab菜单，也就是我点击的登录的链接时打开的是登录的tab，点击注册链接时打开注册的tab,这要怎么实现，劳烦指点。先谢了！
展开
1个回答
展开全部
给你写了一个，看是不是理想中的效果，不对可以改：
ps:看的时候记得改一下引用jquery路径
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!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>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="scripts/jq1.42.js" language="javascript" type="text/javascript"></script>
<style>
html{ font-size:12px;}
body{ margin:50px;}
div,ul,li{ margin:0; padding:0;}
#tab{ width:200px; margin-top:20px;}
#tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;}
#tab li.on{ background:#3CF;}
#bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;}
#links a{ margin-right:10px;}
</style>
</head>
<body>
<span id="links"><a href="#">登录</a><a href="#">注册</a></span>
<ul id="tab">
<li class="on">登录</li>
<li>注册</li>
<div style="clear:both;"></div>
</ul>
<div id="bd">
<div>登录内容</div>
<div>注册内容</div>
</div>
<script>
$(function(){
$("#bd>div:not(:first)").hide();
$("#tab li").click(function(){
var index = $("#tab li").index(this);
$(this).addClass("on").siblings().removeClass("on");
$("#bd>div").eq(index).show().siblings().hide();
});
$("#links a").click(function(){
var index = $("#links a").index(this);
$("#tab li").eq(index).trigger("click");
});
});
</script>
</body>
</html>
ps:看的时候记得改一下引用jquery路径
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!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>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="scripts/jq1.42.js" language="javascript" type="text/javascript"></script>
<style>
html{ font-size:12px;}
body{ margin:50px;}
div,ul,li{ margin:0; padding:0;}
#tab{ width:200px; margin-top:20px;}
#tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;}
#tab li.on{ background:#3CF;}
#bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;}
#links a{ margin-right:10px;}
</style>
</head>
<body>
<span id="links"><a href="#">登录</a><a href="#">注册</a></span>
<ul id="tab">
<li class="on">登录</li>
<li>注册</li>
<div style="clear:both;"></div>
</ul>
<div id="bd">
<div>登录内容</div>
<div>注册内容</div>
</div>
<script>
$(function(){
$("#bd>div:not(:first)").hide();
$("#tab li").click(function(){
var index = $("#tab li").index(this);
$(this).addClass("on").siblings().removeClass("on");
$("#bd>div").eq(index).show().siblings().hide();
});
$("#links a").click(function(){
var index = $("#links a").index(this);
$("#tab li").eq(index).trigger("click");
});
});
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
