jquery显示/隐藏点击和默认功能

我对jquery很新，我需要你的帮助！我试图让一个默认的选项1自动显示，我真的不知道如何完成它。 HTML代码中的三个按钮应该像开关一样使用，并且每个按钮都会在div内显示其他其他内容。但是，我无法找到正确的方式将第一个选项显示为默认选项，即使没有单击按钮也可以进行显示。jquery显示/隐藏点击和默认功能

我希望“完整”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>

来源

2014-10-28 lowmatic

您可以缩短你的代码是这样的：

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

DEMO

来源

2014-10-28 12:10:41 Anujith

试试如下

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

来源

2014-10-28 12:01:57 Amit

你的是隐藏的按钮了。我想这不是必需的。 – Jinandra 2014-10-28 12:03:34

添加显示没有到要隐藏

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

检查这个小提琴的div：

JSFIDDLE

来源

2014-10-28 12:02:51

您可以使用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

来源

2014-10-28 12:04:22

尝试像下面...

$(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/

来源

2014-10-28 12:06:24 SDK

jquery显示/隐藏点击和默认功能

回答

相关问题