Question

我正在努力 1）在首次加载页面时，将“current”类应用于链接（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;
}

Answer 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，那么请使用以下代码：{/ 1}}：

$(this).removeClass("current");

删除“当前”类的另一种方法是使用属性$(this).removeAttr('class'); // Removes the whole `class` attribute：

selectors

总结一下，最佳方法：

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

jQuery使用Element Id添加/删除当前

1 个答案: