JQuery显示一个DIV并隐藏另外四个div
问题描述:
我怎样才能使它当我点击一个链接,显示该链接,但隐藏另一个。JQuery显示一个DIV并隐藏另外四个div
这里是我的代码: Bootply
它工作正常,但在我点击一个链接,我不能找到它被卡在那里等环节。 对不起,长码好友
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#output2").hide();
$("#output3").hide();
$("#output4").hide();
$("#output5").hide();
$("#home2").click(function(e){
e.preventDefault();
$("#output1").hide();
$("#output2").show();
$("#output3").hide();
$("#output4").hide();
$("#output5").hide();
})
$("#home3").click(function(e)
{
e.preventDefault();
$("#output1").hide();
$("#output2").hide();
$("#output3").show();
$("#output4").hide();
$("#output5").hide();
});
$("#home4").click(function(e)
{
e.preventDefault();
$("#output1").hide();
$("#output2").hide();
$("#output3").hide();
$("#output4").show();
$("#output5").hide();
});
$("#home5").click(function(e)
{
e.preventDefault();
$("#output1").hide();
$("#output2").hide();
$("#output3").hide();
$("#output4").hide();
$("#output5").show();
});
});
</script>
</head>
<body>
<div id="output1">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a href="#" id="home1">Home1</a></li>
<li><a href="#" id="home2">Home2</a></li>
<li><a href="#" id="home3">Home3</a></li>
<li><a href="#" id="home4">Home4</a></li>
<li><a href="#" id="home5">Home5</a></li>
</ul>
<div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
<p>Home1</p>
</div>
</div>
<div id="output2">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#" id="home1">Home1</a></li>
<li class="active"><a href="#" id="home2">Home2</a></li>
<li><a href="#" id="home3">Home3</a></li>
<li><a href="#" id="home4">Home4</a></li>
<li><a href="#" id="home5">Home5</a></li>
</ul>
<div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
<p>Home2</p>
</div>
</div><div id="output3">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#" id="home1">Home1</a></li>
<li><a href="#" id="home2">Home2</a></li>
<li class="active"><a href="#" id="home3">Home3</a></li>
<li><a href="#" id="home4">Home4</a></li>
<li><a href="#" id="home5">Home5</a></li>
</ul>
<div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
<p>Home3</p>
</div>
</div><div id="output4">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#" id="home1">Home1</a></li>
<li><a href="#" id="home2">Home2</a></li>
<li><a href="#" id="home3">Home3</a></li>
<li class="active"><a href="#" id="home4">Home4</a></li>
<li><a href="#" id="home5">Home5</a></li>
</ul>
<div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
<p>Home4</p>
</div>
</div>
<div id="output5">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li><a href="#" id="home1">Home1</a></li>
<li><a href="#" id="home2">Home2</a></li>
<li><a href="#" id="home3">Home3</a></li>
<li><a href="#" id="home4">Home4</a></li>
<li class="active"><a href="#" id="home5">Home5</a></li>
</ul>
<div class="jumbotron" style="background-color:white;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
<p>Home5</p>
</div>
</div>
</body>
答
到这里看看:
http://www.bootply.com/JJYUDyFJft
基本上而不是在你的榜样所有冗余代码的它是一个更好的方法来让每个选项卡上的活动类更改点击。
另请注意使用数据切换属性。
您仍然需要添加选项卡将会转到的内容。
+0
这不是什么即时通讯寻找,它应该刷新整个div不仅是活跃的类 – albaneso 2014-10-01 21:21:42
不提供链接...提供代码... – LcSalazar 2014-10-01 21:12:59
在这个环节u能找到我的代码:) http://www.bootply.com/DoQ0OoQu0w – albaneso 2014-10-01 21:14:34
如果Bootply已关闭,或去远?您应该*总是*在问题中发布您的代码。 – j08691 2014-10-01 21:16:01