单击后，div内容在jQuery选项卡中消失了吗？
[英]Div content disappears in jQuery tabs after click?
问题描述
So I'm trying to use <div> 's within this jQuery tab and upon refreshing the page the div content shows up fine. 
所以我试图在这个jQuery选项卡中使用<div>并在刷新页面时div内容显示正常。 But when I switch from one tab to another and back, the content disappears. 但是当我从一个标签切换到另一个标签并返回时，内容消失了。 I'm not sure why this is happening. 我不确定为什么会这样。
<script type="text/javascript">
$(document).ready(function(){
$('#tabs > div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#tabs {
font-size: 80%;
margin: 10px 0;
}
#tabs ul {
width: 600px;
padding-top: 2px;
}
#tabs li {
margin-left: 30px;
list-style: none;
}
* html #tabs li {
display: inline;
}
#tabs li, #tabs li a {
float:left;
}
#tabs ul li.active {
border-top:2px #8B6914 solid;
background-color: #a09069;
}
#tabs div {
background: #a09069;
clear: both;
padding: 8px;
min-height: 720px;
}
#tabs div h3 {
margin-bottom: 20px;
}
#tabs div p {
line-height: 150%;
}
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #000;
font-weight: bold;
font-size: 22;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="tabs">
<ul>
<li><a href="#tab-1">DC Boards</a></li>
<li><a href="#tab-2">RP Boards</a></li>
</ul>
<div id="tab-1">
<br><br><center><font size="17">Title 1</font></center><hr>
<div>Test</div>
</div>
<div id="tab-2">
<br><br><center><h1>Title 2</h1></center><hr><br>
<div>Test</div>
</div>
2 个解决方案
解决方案1
2 已采纳 2013-02-26 02:26:48
You had a $('#tabs div').hide(); 你有一个$('#tabs div').hide(); instead of $('#tabs > div').hide(); 而不是$('#tabs > div').hide(); in your .click function 在你的.click function
<script type="text/javascript">
$(document).ready(function(){
$('#tabs > div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs > div').hide();
// a > were missing
$(currentTab).show();
return false;
});
});
</script>
解决方案2
0 2013-02-26 02:26:56
It dissappears because you are hiding all divs 它消失了，因为你隐藏了所有的div
$('#tabs div').hide();
Instead you should only hide the first level: 相反，你应该只隐藏第一级：
$('#tabs')children('div').hide();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.