jQuery addClass(), похоже, не добавляет класс CSS

Question

Я ужасен в jQuery, только начинаю учиться. У меня есть структура меню, которая находится на главной странице .NET, на каждой странице контента, использующей главную страницу, я хочу применить другой класс CSS к элементу в этом списке главной страницы UL.

<section id="navigation"> 
    <nav id="nav-wrap"> 
     <ul id="topnav" class="sf-menu"> 
     <li><a href="Default.aspx">Home</a></li> 
     <li><a href="About.aspx">About</a></li> 
     <li class="current"><a href="Purchase.aspx">Buy Now</a></li> 
     <li><a href="ContactUs.aspx">Contact Us</a></li> 
     </ul><!-- topnav --> 
    </nav><!-- nav --> 
    <div class="clear"> 
</div> 

Мой блок Я звоню с JQuery:

<section id="navigation"> 
    <nav id="nav-wrap"> 
     <ul id="topnav" class="sf-menu"> 
     <li><a href="Default.aspx" id="homelink" title="Home">Home</a></li> 
     <li><a href="About.aspx" id="aboutlink" title="About">About</a></li> 
     <li><a href="Purchase.aspx" id="buynowlink" title="Buy Now"><span>Buy Now</span></a></li> 
     <li><a href="ContactUs.aspx" id="contactuslink" title="Contact Us">Contact Us</a></li> 
     </ul><!-- topnav --> 
    </nav><!-- nav --> 
    <div class="clear"> 
</div> 

Когда я пишу HTML этот путь, нав элемент "Купить сейчас" появляется желтый. Но это главная страница, поэтому я хочу сделать это с помощью jQuery, поэтому она не жестко указана на главной странице.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#buynowlink').addClass('current'); 
     $('#pagetitle').html('Purchase'); 
    }); 
</script> 

Этот код jQuery не подходит для применения CSS или, возможно, что-то происходит не так? Строка ниже, которая устанавливает заголовок H1 для страницы, поэтому я не думаю, что это проблема того, чтобы быть страницей под главной страницей.

Что странно, если я это делаю: он работает, поэтому у меня должна быть какая-то проблема с CSS, которую я не получаю.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#buynowlink').addClass('current'); 
     $('#pagetitle').html('Purchase'); 
     $('#buynowlink').css("color", "yellow"); 
    }); 
</script> 

Answer 1

Идентификатор находится на a, но вы хотите добавить класс на li, его родителей.

Таким образом, вы хотите $('#buynowlink').parent().addClass('current');

В подобных случаях, инструмент разработчика, такие как встроены во всех основных обозреватель теперь может показывать текущее состояние DOM, так что вы бы проверить ссылку Купить сейчас и посмотреть что класс был прикреплен к якорю, а не к элементу списка.

Answer 2

попробовать это

добавить id=BuyNow в <li> элемента.

<section id="navigation"> 
    <nav id="nav-wrap"> 
     <ul id="topnav" class="sf-menu"> 
     <li><a href="Default.aspx">Home</a></li> 
     <li><a href="About.aspx">About</a></li> 
     <li id="BuyNow"><a href="Purchase.aspx">Buy Now</a></li> 
     <li><a href="ContactUs.aspx">Contact Us</a></li> 
     </ul><!-- topnav --> 
    </nav><!-- nav --> 
    <div class="clear"> 
</div 


<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#BuyNow').addClass('current'); 

    }); 
</script> 

Answer 3

В реальном мире я хотел бы предложить, чтобы прочитать URL текущей страницы и назначить current класс к желаемой ссылке:

var pageName = $(location).attr('href').split('/').pop(); // Purchase.aspx 


if(pageName===''){ 
    $('#topnav a[href="Default.aspx"]').addClass('current'); 
}else{ 
    $('#topnav a[href="'+pageName+'"]').addClass('current'); 
}