當我點擊子菜單父級菜單應該突出顯示

-1

當我們點擊子菜單父級菜單應該突出顯示。請檢查我的Javascript代碼。我無法得到結果。我得到的結果只有主菜單突出顯示。請幫助我。提前感謝當我點擊子菜單父級菜單應該突出顯示

<html> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#cssmenu a').each(function(index) { 
      if(this.href.trim() == window.location) 
      { 
      //check if 1st level, then below condition 
      //if(this.class() != "has-parent") 
      //{ 
       // $(this).addClass("active"); 
      //} 
       //if not first level, assign active to parent of this 
      //if(this.class()= "has-parent") 
      //{ 
       $(this).addClass("active"); 
      //}  
       } 
     }); 
    }); 
    </script> 
    <style> 
    .active{ 
     background: #4FA9E4; color:#FFF; 

    } 

    <ul id="id"> 
    <body> 
    <div id="cssmenu"> 
     <ul> 
      <li class="has-sub"><a href="company.php">Company</a> 

      <ul><li class="has-parent"><a href="a.php">a</a></li> 
      <li><a href="b.php">b</a></li> 
      </ul> 
      </li> 
      <li class="has-sub"><a href="patners.php">Patners</a> 
      <ul><li><a href="c.php">c</a></li> 
      <li><a href="d.php">d</a></li></ul> 
      </li> 

      <li><a href="contactus.php">Contact Us</a></li> 
       </ul> 
       </div> 
    </body> 
    </html>

來源

2014-02-19 user3160105

可以粘貼你的代碼[的jsfiddle（http://jsfiddle.net/）爲我們這樣調試代碼可能更容易。 – Newbi3

您忘記關閉造成問題的樣式標籤。此外，我添加了一些其他標籤，如doctype和head標籤。驗證你的文件http://validator.w3.org/，你不會再遇到這樣的問題。

<!doctype html><html><head><title>test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#cssmenu a').each(function(index) {console.log(this.href); 
      if(this.href.trim() == window.location) 
      { 
      //check if 1st level, then below condition 
      //if(this.class() != "has-parent") 
      //{ 
       // $(this).addClass("active"); 
      //} 
       //if not first level, assign active to parent of this 
      //if(this.class()= "has-parent") 
      //{ 
       $(this).addClass("active"); 
      //}  
       } 
     }); 
    }); 
    </script> 
    <style> 
    .active{ 
     background: #4FA9E4; color:#FFF;display:block; 

    } 
    </style> 
</head><body> 

    <div id="cssmenu"> 
     <ul> 
      <li class="has-sub"><a href="company.php">Company</a> 

      <ul><li class="has-parent"><a href="a.php">a</a></li> 
      <li><a href="#asd">b</a></li> 
      </ul> 
      </li> 
      <li class="has-sub"><a href="patners.php">Patners</a> 
      <ul><li><a href="c.php">c</a></li> 
      <li><a href="index.php">d</a></li></ul> 
      </li> 

      <li><a href="contactus.php">Contact Us</a></li> 
       </ul> 
       </div> 
</body></html>

來源

2014-02-19 07:16:02 JJJ

是這樣的嗎？

HTML：

<div id="cssmenu"> 
    <ul> 
     <li class="has-sub"><a href="#">Company</a> 

     <ul><li class="has-parent"><a href="#">a</a></li> 
     <li><a href="#">b</a></li> 
     </ul> 
     </li> 
     <li class="has-sub"><a href="#">Patners</a> 
     <ul><li><a href="#">c</a></li> 
     <li><a href="#">d</a></li></ul> 
     </li> 

     <li><a href="#">Contact Us</a></li> 
      </ul> 
      </div>

JS：

$(function(){ 
    $('#cssmenu li').click(function() { 
     if ($(this).hasClass('has-parent')){ 
      var parent = $(this).closest('.has-sub'); 
      parent.attr('class', 'active'); 
     } 
    }); 
});

樣式：

.active{ 
     background: #4FA9E4; color:#FFF; 
}

請參閱本fiddle。

來源

2014-02-19 07:20:06 bargoras

我沒有得到確切的答案，我想請任何人通過給予正確的代碼來幫助我，我首先給出的代碼只突出顯示了點擊的內容，但是我希望當我點擊子菜單主菜單時應該突出顯示，請幫助 – user3160105

添加單擊功能

$('#cssmenu a').unbind('click').click(function(){ 
      $(this).addClass("active"); 
      return false; 
    });

樣品here

來源

2014-02-19 07:22:01 user2167382

當我點擊子菜單父級菜單應該突出顯示

回答

相關問題