javascript或php上的活動類菜單項

Question

我有菜單項代碼...。我想如果我單擊菜單a，它將顯示一個頁面，如果我單擊菜單b，它將顯示不包含頁面a的頁面b。

誰能告訴我如何使用javascript或php解決此問題，我是新手..請幫助..

這是我的HTML代碼

<div class="col-xs-9">
  <ul class="menu-items">
    <li class="active"></li>
    <li>b</li>
  </ul>
  <div style="width:100%;border-top:1px solid silver">
    <p style="padding:15px;">page a</p>
  </div>
  <div class="attr1" style="width:100%;border-top:1px solid silver">
    <p>page b</p>
  </div>
</div>

Answer 1

您的意思是您要在單擊列表項時打開一個新頁面，因此只需執行此window.open(pass your page url here)

 <div class="col-xs-9"> <ul class="menu-items"> <li class="active"></li> <li>b</li> </ul> <div style="width:100%;border-top:1px solid silver"> <p style="padding:15px;">page a</p> </div> <div class="attr1" style="width:100%;border-top:1px solid silver"> <p onclick="function(){window.open(pageUrl)}">page b</p> </div> </div> 

Answer 2

首先，您需要隱藏頁面b，為您的div提供ID，以通過javascript顯示/隱藏：

<div class="col-xs-9">
    <ul class="menu-items">
        <li id="showA" class="active"></li>
        <li id="showB">b</li>

    </ul>
    <div id="pageA" style="width:100%;border-top:1px solid silver">
        <p style="padding:15px;">
            page a
        </p>
    </div>
     <div id="PageB" class="attr1" style="width:100%;border-top:1px solid silver;display:none">
        <p>page b</p>
    </div>
</div>

顯示特定頁面的Javascript代碼：

<script>
  $(document).ready(function() {
    $("#showA").click(function() {
            $("#pageB).hide();
            $("#pageA").show();
     });

     $("#showB").click(function() {
            $("#pageA).hide();
            $("#pageB").show();
     });
</script>

要激活菜單，請使用以下代碼：

$(".menu-items li").click(function() {
   $(".menu-items li").removeClass("active);
   $(this).addClass("active");
});