Javascript 当其他元素处于活动状态时,jQuery不显示隐藏元素
我想隐藏p元素,并在第二个tabpanel处于活动状态时显示它。我有一个引导面板,如下所示:Javascript 当其他元素处于活动状态时,jQuery不显示隐藏元素,javascript,jquery,twitter-bootstrap-3,Javascript,Jquery,Twitter Bootstrap 3,我想隐藏p元素,并在第二个tabpanel处于活动状态时显示它。我有一个引导面板,如下所示: <div id="Mobile-menu"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12"><h2>Do You have a smartphone ?</h2></div&g
<div id="Mobile-menu">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12"><h2>Do You have a smartphone ?</h2></div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="mobile-panel" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="smartphone-on" class="active"><a href="#smart-yes" aria-controls="home" role="tab" data-toggle="tab">Yes</a></li>
<li role="presentation" id="smartphone-off" ><a href="#smart-no" aria-controls="profile" role="tab" data-toggle="tab">No</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="smart-yes">
<div class="smart-item 1">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 2">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 3">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 4">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="smart-no">
<div class="smart-item 1">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 2">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 3">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
<div class="smart-item 4">
<h2>Lorem ipsum</h2>
<p>sit dolor amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p id="menu-legend">*not available</p>
</div>
</div>
</div>
</div>
请尝试以下代码:
$(function(){ //put your code inside document ready
$("#menu-legend").hide();
if ($("#smartphone-off").hasClass("active")){ //add # to smartphone-off selector
$("#menu-legend").show();
};
});
您忘记了在if statemenet中关闭智能手机,或者这是一个错误的键入$function{…将代码放在这里…};-您需要等待文档加载。以及上述评论@Mohamed Yousef我替换了它,仍然没有效果:没有等级active@Mohamed-当我点击第二个选项卡时,如果它有这个类。。。它不工作,但只有$menu-legend.hide;工作很好。只需woow。检查smartphone off是否具有活动类是的,它处于活动状态,但仍处于隐藏状态。您在哪里设置活动类?也许你是在.hasClassactive调用之后设置类,你是对的。在这之后,我通过单击第二个tabpanel来更改类,但是通过更改tabpanel,我可以做些什么来显示和隐藏这个元素呢?
$(function(){ //put your code inside document ready
$("#menu-legend").hide();
if ($("#smartphone-off").hasClass("active")){ //add # to smartphone-off selector
$("#menu-legend").show();
};
});