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

删除“当前”类的另一种方法是使用属性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 回答