Question

我使用Bootstrap的标签组件遇到了一个问题。我试图弄清楚如何在点击特定标签时隐藏lorem ipsum部分并显示隐藏的div然后，在点击/选择不同的选项卡时，再次隐藏隐藏的div并显示lorem ipsum部分试。

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
     
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12">    
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12">    
    <div class="hidden">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这是一个JSFiddle http://jsfiddle.net/zacnespral21/fkv5tvaz/

提前致谢

Answer 1

您的js代码应如下所示：

$('.nav-pills a').on('click', function (e) {
    e.preventDefault();

    if($(this).attr('href')=='#three'){
        $('#lorem-text').hide();
        $('#hidden-text div').removeClass('hidden')
    }
    else{
        $('#lorem-text').show();
        $('#hidden-text div').addClass('hidden')
    }
    $(this).tab('show');
});

＆＃13;

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();

        if($(this).attr('href')=='#three'){
            $('#lorem-text').hide();
            $('#hidden-text div').show()
        }
        else{
        	$('#lorem-text').show();
            $('#hidden-text div').hide()
        }
        $(this).tab('show');
    });  
     
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12" id="lorem-text">    
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12" id="hidden-text">    
    <div class="hidden">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

您应该可以使用events

执行此操作

＆＃13;

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    //Added a class for the tab control, but there's a better name
    $('.tab-control-three').on('shown.bs.tab', function (e) {

        //Change this class from bootstrap's 'hidden' 
        //to something that doesn't force display:none
        $('.hidden-text').show();

        //You'll need to add a class for this, 
        //but please name it something better :P
        $('.lorem-ipsum').hide();

    })  
     
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a class="tab-control-three" href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12">    
    <div>
        <p class="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12">    
    <div class="hidden-text">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

＆＃13;

其他标签的切换回应该类似。

Bootstrap显示/隐藏选项卡组件

2 个答案: