jquery tabs - what am I doing wrong?
Html code is:
<div id="questions">
<ul>
<li class="selected"><a href="#fly">Fly</a></li>
<li><a href="#fly1">Fly 1</a></li>
</ul>
<div id="fly" style="display: block;">
<div id="question141">
<div id="question104">
<div id="question80">
<div id="question79">
</div>
<div id="fly1">
<div id="question141">
<div id="question104">
<div id="question80" >
<div id="question79" >
</div>
</div>
jQuery:
<script>
jQuery(document).ready(function(){
jQuery('#questions div').hide();
jQuery('#questions div:first').show();
jQuery('#questions ul li:first').addClass('active');
jQuery('#questions ul li a').click(function(){
jQuery('#questions ul li').removeClass开发者_JAVA技巧('active');
jQuery(this).parent().addClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#questions div').hide();
jQuery(currentTab).show();
return false;
});
});
</script>
Above code has two tabs and i am using jQuery to show tabs on click. But when i click any tab. The elements inside the tab does not show. Am i doing something wrong?
You are doing many things wrong.
Demo on jQuery UI Tabs: http://jsfiddle.net/Qj23q/
All those question divs are unclosed.. close them and then your code works
Your code works for me... Why do you think it doesnt? Here is a jsfiddle where you can see. When you click on a link the different tabs appear.
use this HTML to see that it works with your current javascript
<div id="questions">
<ul>
<li class="selected"><a href="#fly">Fly</a></li>
<li><a href="#fly1">Fly 1</a></li>
</ul>
<div id="fly" style="display: block;">
fly........
</div>
<div id="fly1">
fly1
</div>
</div>
When you say jQuery('#questions div').hide() or show() it will hide all divs inside #questions div. Please try below code it will work for you.
<script>
jQuery(document).ready(function(){
jQuery('#questions > div').hide();
jQuery('#questions div:first').show();
jQuery('#questions ul li:first').addClass('active');
jQuery('#questions ul li a').click(function(){
jQuery('#questions ul li').removeClass('active');
jQuery(this).parent().addClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#questions > div').hide();
jQuery(currentTab).show();
return false;
});
});
</script>
精彩评论