当其他元素处于活动状态时，jQuery不显示隐藏元素

Question

我想隐藏p element并在第二个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>
        </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>

我添加到footer.php javascript代码，因为当面板秒处于活动状态时(li#smartphone-off) ，我想显示id="menu-legend"段落，但它不起作用。 jQuery库正在加载-当我仅在下面添加$("#menu-legend").hide(); -运作良好。 问题出在哪里？

<?php
    }
    if ($pagename == "New smartphones - Landin Page"){
?>
<script type="text/javascript">

$("#menu-legend").hide();

if ($("smartphone-off").hasClass("active")){

    $("#menu-legend").show();
};

</script>
<?php
    }
?>

Answer 1

试试这个代码：

$(function(){ //put your code inside document ready
    $("#menu-legend").hide();

    if ($("#smartphone-off").hasClass("active")){    //add # to smartphone-off selector
        $("#menu-legend").show();
    };
});