1

私は、1）ページが最初にロードされたときにデフォルトとして「現在の」クラスをリンク（id = "book"）に適用し、2）ul「サブメニュー」のリンクがクリックされたときに「現在」を追加しようとしていますそのクラスを削除し、前の「現在」リンクから「現在」を削除します。初心者なので分かりやすく教えてください。どんな助けでも大歓迎です。ありがとう。

<script type="text/javascript">
function setCurrent(obj){
$('ul#submenu li a').each(function(){   
    $('.current').removeClass('current'); 
});
$(obj).addClass('current');
}
</script>
</head>

<body onload="setCurrent('book')">
<div id="container">
<div id="content-top"></div>
<div id="content-left"></div>
<div id="content-main">
    <iframe src="port_book.html" name="contentframe" align="middle" scrolling="no" id="contentframe"></iframe>     
</div>  
<div id="content-right"></div>
<div id="content-bottom">
    <ul id="submenu">
    <li><a onclick="setCurrent(this);" href="port_book.html" id="book" target="contentframe">book</a><span class="bar">|</span></li>
    <li><a onclick="setCurrent(this);" href="port_poster.html" id="poster" target="contentframe">poster</a><span class="bar">|</span></li>
    <li><a onclick="setCurrent(this);" href="port_annual_report.html" id="annualreport" target="contentframe">annual report</a><span class="bar">|</span></li>
    <li><a onclick="setCurrent(this);" href="port_branding.html" id="branding" target="contentframe">branding</a><span class="bar">|</span></li>
    <li><a onclick="setCurrent(this);" href="port_packaging.html" id="packaging" target="contentframe">packaging</a></li>
    </ul>
</div>

CSSは次のとおりです。

ul#submenu li{
color: #770046;
}
ul#submenu li a{
color: #333;
}
ul#submenu li.current a{
color: #770046;
}
4

1 に答える 1

1

まず、onclickリンクから を削除します。

 onclick="setCurrent(this);"

次に、次の jQuery コードを追加します。

<script type="text/javascript">
$(document).ready(function() { // On page load
  $("#book").addClass("current"); // Add ".current" to "#book"
  $("ul#submenu li a").on("click", function() { // When a link clicked
    if( !$(this).hasClass("current") ) // If link has not already have a "current" class
    {
      $('ul#submenu li a').each(function(){ // For each link
        $(this).removeClass("current"); // Remove "current" class
      });
      $(this).addClass("current"); // Add "current" class to the clicked link
    }
  });
});
</script>

リンクに他の が含まれていないことが確実な場合は、 のclass代わりに$(this).removeClass("current");これを使用します。

$(this).removeAttr('class'); // Removes the whole `class` attribute

「現在の」クラスを削除する別の方法は、 attribute を使用することですselectors。

$("ul#submenu li a[class*=current]").removeClass('current'); // IE8+, Webkit, Opera, Mozzila

要約すると、最良のアプローチは次のとおりです。

<script type="text/javascript">
$(document).ready(function() {
  $("#book").addClass("current");
  $("ul#submenu li a").on("click", function() {
    if( !$(this).hasClass("current") ) 
    {
      $("ul#submenu li a[class*=current]").removeClass('current');
      $("ul#submenu li a[class='']").removeAttr('class');
      $(this).addClass("current");
    }
  });
});
</script>
于 2013-04-14T22:33:35.630 に答える