-2

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

3 回答 3

1

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

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

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

于 2012-12-19T03:50:33.380 回答
1

在现实世界中，我建议阅读当前页面的 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');
}
于 2012-12-19T03:56:08.153 回答
0

试试这个

添加元素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>
于 2012-12-19T03:45:13.650 回答