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').parent().addClass('current');

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

Answer 2

在现实世界中，我建议您阅读当前页面的网址，并将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

试试这个

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

jQuery addClass（）似乎没有添加CSS类

3 个答案: