Question

我对Jquery很新，我需要你的帮助！我正在尝试使默认选项1自动显示，我真的不知道如何完成它。 HTML代码中的三个按钮应该像开关一样使用，每个按钮都会在div中显示其他内容。但是，即使没有单击按钮，我也找不到将第一个选项显示为默认选项的正确方法。

我希望“full”div中的内容首先显示为默认内容，我需要使用按钮显示/隐藏它。

请帮助我以正确的方式解决这个问题。

HTML：

<div class="btn-group">
  <button type="button" id="option1">full</button>
  <button type="button" id="option2">empty</button>
  <button type="button" id="option3">new</button>
</div>      

<div id="show-div">
    <div id="full">
        <p>This full should be default</p>
    </div>
    <div id="empty">
        <p>This is empty</p>                
    </div>
    <div id="new">
        <p>this is another option</p>               
    </div>
</div>

Jquery的：

<script type="text/javascript">
$(document).ready(function() {
   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  
            $('#empty').hide();
            $('#new').hide();           
       }

        else if($(this).attr('id') == 'option2') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').show();
            $('#new').hide();   
       }
        else if($(this).attr('id') == 'option3') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').hide();
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});
</script>

Answer 1

您可以像这样缩短代码：

$(document).ready(function () {
    $("#empty, #new").hide();
    $('button[type="button"]').click(function () {
        $('#show-div').show();
        $('#' + this.innerHTML).show().siblings().hide();
        $('#units').show();
    });
});

<强> DEMO

Answer 2

尝试如下

$(document).ready(function() {
   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
       $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  

       }

        else if($(this).attr('id') == 'option2') {
           $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#empty').show();
       }
        else if($(this).attr('id') == 'option3') {
           $('div').not(".btn-group").hide();
            $('#show-div').show(); 
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});

Demo

Update Demo

Answer 3

向要隐藏的div添加display none

<div class="btn-group">
  <button type="button" id="option1">full</button>
  <button type="button" id="option2">empty</button>
  <button type="button" id="option3">new</button>
</div>      

<div id="show-div">
    <div id="full">
        <p>This full should be default</p>
    </div>
    <div id="empty" style="display:none">
        <p>This is empty</p>                
    </div>
    <div id="new"  style="display:none">
        <p>this is another option</p>               
    </div>
</div>

检查这个小提琴：

JSFIDDLE

Answer 4

您可以使用下面的css或jquery

CSS

#empty #new{display:none;}

<强> DEMO with CSS

使用jQuery

<script type="text/javascript">
$(document).ready(function() {
   //hide empty and new
   $('#empty').hide();
   $('#new').hide();   

   $('button[type="button"]').click(function() {
       if($(this).attr('id') == 'option1') {
            $('#show-div').show(); 
            $('#full').show();
            $('#units').show();  
            $('#empty').hide();
            $('#new').hide();           
       }

        else if($(this).attr('id') == 'option2') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').show();
            $('#new').hide();   
       }
        else if($(this).attr('id') == 'option3') {
            $('#show-div').show(); 
            $('#full').hide();
            $('#empty').hide();
            $('#new').show();   
       }
       else {
            $('#show-div').show(); 
            $('#full').show();
            $('#default').show();
       }
   });
});
</script>

<强> DEMO with jQuery

Answer 5

尝试如下...

   $(document).ready(function() {
         $('#show-div').show(); 
         $('#full').show();
         $('#empty').hide();
         $('#new').hide();    

  $('button[type="button"]').click(function() {
   if($(this).attr('id') == 'option1') {
        $('#show-div').show(); 
        $('#full').show();
        $('#units').show();  
        $('#empty').hide();
        $('#new').hide();           
   }

    else if($(this).attr('id') == 'option2') {
        $('#show-div').show(); 
        $('#full').hide();
        $('#empty').show();
        $('#new').hide();   
   }
    else if($(this).attr('id') == 'option3') {
        $('#show-div').show(); 
        $('#full').hide();
        $('#empty').hide();
        $('#new').show();   
   }
   else {
        $('#show-div').show(); 
        $('#full').show();
        $('#default').show();
   }
 });
 });

这是小提琴...... http://jsfiddle.net/w9p5ck6o/

Jquery显示/隐藏单击和默认功能

5 个答案: