прилагая CSS для текущего меню

Я пытаюсь добавить CSS маркер моего меню, чтобы определить текущую страницу и текущее меню родительского следующим образом: http://myweb.com/#about - Это родительское меню с детьми, как http://myweb.com/about/history - Это страница с содержанием http://myweb.com/about/vision - Это это страница с содержаниемприлагая CSS для текущего меню

Это разметке

<ul id="menu" class="nav-main">       
<li><a href="#about">About</a> 
<ul> 
<li><a href="http://www.myweb.com/about/history">History</a></li> 
<li><a href="http://www.myweb.com/about/vision">Vision</a></li> 
</ul> 
</li> 
<li><a href="#contact">contact</a> 
<ul> 
<li>.....</li> 
</ul> 
</li> 
</ul>

У меня есть ниже Javascript

<script type="text/javascript"> 
$("ul#menu.nav-main li a[href='#@Request.Url.LocalPath.Split('/')[1]']").parent("li").addClass("current-menu-item"); 
</script>

Это обозначает родительское меню и все дочерние меню вместо желаемого. то есть; отмечая только родительское меню и конкретную страницу. Например, на странице http://myweb.com/about/history я хочу только это и указать http://myweb.com/#about родительское меню. Любая помощь будет оценена

источник

2015-02-13 Diin

Показать обработанную HTML, а не на стороне сервера код – dave

спасибо я изменивший в HTML разметку – Diin

Изменить яваскрипт раздел слишком – dave

Ниже кода поможет вам

Jquery:

//for example i hardcoded the url below 
var url='http://www.myweb.com/parent-info/stuff'; 
//when you test in live replace above code by below 
//var url $(location).attr('href') 
var url_cnt=url.split('/'); 
if(url_cnt[url_cnt.length-1].length != 0 && url_cnt[url_cnt.length-2].length!=0){ 
$("#menu a").filter(function(){ return $(this).text().toLowerCase().indexOf(url_cnt[url_cnt.length-1].toLowerCase()) > -1;}).addClass("current-menu-item"); 
$("#menu a").filter(function(){ return $(this).text().toLowerCase().indexOf(url_cnt[url_cnt.length-2].toLowerCase()) > -1;}).addClass("current-menu-item"); 
}

Вот последний обновленный JSFiddle Dinn: http://jsfiddle.net/jvyLtr82/17/

источник

2015-02-13 19:44:15

Спасибо Нанда. Мне нужно, когда вы нажмете, чтобы перейти в подменю, я хочу, чтобы в родительское меню и подменю был добавлен класс currnt-menu-item. – Diin

@Diin попробуйте ответить выше, так работает, как и ожидалось. –

он делает то же самое, что и я не хочу. по щелчку «истории» он отмечает «о» и «видение», а также «историю». Я хочу, чтобы я выбрал «историю», он должен отмечать только «историю» и «около» – Diin

Это не может быть общим решения, но попробовать, если это может решить вашу проблему.

Попробуйте дать идентификаторы своего li с, как показано ниже

<html> 
    <body> 

    <ul id="menu" class="nav-main">       
      <li id="about"><a href="#about">About</a> 
       <ul> 
        <li id="history"><a href="http://www.myweb.com/about/history">History</a></li> 
        <li id="vision"><a href="http://www.myweb.com/about/vision">Vision</a></li> 
        </ul> 
      </li> 
      <li id="contact"><a href="#contact">contact</a> 
      <ul> 

      </ul> 
      </li> 
    </ul> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var url=$(location).attr('href'); 
     alert(url); 
     if(url.indexOf("history")>=0) 
     { 
      ("#about").addClass("current-menu-item"); 
      ("#history").addClass("current-menu-item"); 

     } 
     else if(url.indexOf("vision")>=0) 
     { 
      ("#about").addClass("current-menu-item"); 
      ("#vision").addClass("current-menu-item"); 
     } 
    }); 
    </script> 
    </body> 
</html>

источник

2015-02-14 21:00:45

спасибо, но у меня есть намного больше меню - около 30 из них, и поэтому мне нужно решение, которое будет динамичным – Diin

прилагая CSS для текущего меню

ответ

Смежные вопросы