Question

所以我试图在这个jQuery选项卡中使用<div>，在刷新页面时，div内容显示正常。但是当我从一个标签切换到另一个标签并返回时，内容消失了。我不确定为什么会这样。

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

Answer 1

$('#tabs div').hide();

中有$('#tabs > div').hide();而不是.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>

Answer 2

它消失了，因为你隐藏了所有的div

$('#tabs div').hide();

相反，你应该只隐藏第一级：

$('#tabs')children('div').hide();

单击后，div内容在jQuery选项卡中消失了吗？

2 个答案: