jquery标签 - 我做错了什么?

时间:2011-07-21 23:28:54

标签: jquery

Html代码是:

<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('active');
        jQuery(this).parent().addClass('active');
        var currentTab = jQuery(this).attr('href');
        jQuery('#questions  div').hide();
        jQuery(currentTab).show();
        return false;
    });
});
</script>

上面的代码有两个标签,我使用jQuery显示点击标签。但是当我点击任何标签时。选项卡内的元素不显示。难道我做错了什么?

3 个答案:

答案 0 :(得分:1)

所有这些问题div都是未公开的......关闭它们然后你的代码就可以了

你的代码对我有用......为什么你认为它没有?这是一个你可以看到的jsfiddle。单击链接时,将显示不同的选项卡。

使用此HTML查看它是否适用于您当前的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>

答案 1 :(得分:1)

你做了很多错误。

在jQuery UI标签上演示:http://jsfiddle.net/Qj23q/

答案 2 :(得分:0)

当你说jQuery('#questions div')。hide()或show()时,它会隐藏#questions div中的所有div。请尝试以下代码,它将适合您。

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