-2

私は jQuery が苦手で、学び始めたばかりです。.NET マスター ページにメニュー構造があり、そのマスター ページを使用する各コンテンツ ページで、その UL マスターページ リスト内の項目に異なる CSS クラスを適用したいと考えています。

<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 を記述すると、nav 要素の「Buy Now」が黄色く表示されます。しかし、これはマスター ページなので、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の現在の状態を表示できるようになったため、[今すぐ購入]リンクを調べて、クラスがリストではなくアンカーにアタッチされていることを確認できます。アイテム。

于 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 に答える