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

ID 在a 上，但您想在其父级li 上添加类。

因此，你想要$('#buynowlink')<strong>.parent()</strong>.addClass('current');

在这种情况下，所有主流浏览器中内置的开发人员工具现在可以向您显示 DOM 的当前状态，以便您检查 Buy Now 链接并看到该类已附加到锚点而不是比列表项。

Answer 2

在现实世界中，我建议阅读当前页面的 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');
}

Answer 3

试试这个

在<li> 元素中添加id=BuyNow。

<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>