2013-02-26 85 views
0

所以我试图在这个jQuery选项卡中使用<div>,并在刷新页面时div内容显示正常。但是当我从一个标签切换到另一个标签时,内容消失。我不知道为什么会发生这种情况。div内容在点击后会在jQuery标签中消失吗?

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

+0

'

'? ''?真?? – j08691 2013-02-26 02:22:55

回答

2

你有$('#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> 
0

它dissappears因为你是隐藏所有div

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

相反,你应该只隐藏第一等级:

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