开发者

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜