4

我有以下代码：

<div id="nav">
  <ul>
    <li id="tabOne" class="first current"><a href="./CS1.html" target="SheetView">Page One</a></li>
    <li id="tabTwo"><a href="./CS2.html" target="SheetView">Page Two</a></li>
    <li id="tabThree"><a href="./CS3.html" target="SheetView">Page Three</li>
    <li id="tabFour"><a href="./CS4.html" target="SheetView">Page Four</a></li>
    <li id="tabFive"><a href="./CS5.html" target="SheetView">Page Five</a></li>
    <li id="tabSix"><a href="./CS6.html" target="SheetView">Page Six</a></li>
  </ul>

这会将所选页面加载到名为“SheetView”的 iframe 中。我需要做的是在单击当前未选中的选项时使用 JavaScript 更改类。我应该说我的 CSS 中已经设置了当前类。我只是没有办法触发它。

我想在上面添加一个 onlick 事件<UL>并调用onclick="Javascript:changeCurrent();"但有问题（实际上是四个）：

  1. 我<ul onclick="JavaScript:changeCurrent();>需要在哪里举办活动？
  2. 使更改发生的结果是什么 JavaScript？
  3. 如何使第一个选项默认设置为当前选项？
  4. 有没有办法阻止当前选择的选项成为活动链接？

我找到了一些不同的例子，但我无法定制它们来为我工作。非常感激任何的帮助。

4

3 回答 3

2

由于您指定需要非 jQuery 响应，因此这里有一个可以适当切换的函数：

function toggleNavSelected(el){
    var list = document.getElementById('nav').children[0];
    for(var i=0; i<list.children.length; i++){
        var cur = list.children[i];
        if(el==cur){
            cur.classList.add("current");
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
                return false;
            });
        } else {
            if(cur.classList.contains("current")){
                cur.classList.remove("current");
            }
            cur.firstChild.onclick = (function(){
                toggleNavSelected(this.parentElement);
            });
        }
    }
}

向每个 LI ( onclick="toggleNavSelected(this);") 添加 onclick 处理程序，或者在加载菜单后执行以下操作：

var list = document.getElementById('nav').children[0];
for(var i=0; i<list.children.length; i++){
    var el = list.children[i];
    el.firstChild.onclick = (function(){
        toggleNavSelected(this.parentElement);
    });
}

演示：http: //jsfiddle.net/bWY7P/2/

（注意：JSFiddle 脚本有一个小的区别；它return false;在 onclick 函数中添加了一个，这样您就可以在没有实际遵循 HREF 属性的链接的情况下使用它。不要在您的实时代码中使用该行）

解释：

该函数查看LI元素中的每个#nav元素。
如果该元素是传递给函数的元素，那么它会添加 class .current。
否则，它会删除该类.current（如果存在）。

第二部分将函数绑定到a调用该toggleNavSelected()函数的每个元素的 onclick 事件，并将其父元素 (the li) 作为参数传递。

于 2012-12-09T00:47:03.703 回答
0

1）如果您想在单击一个项目时更改当前选择的类，请将 onclick 放入 li 项目 2）在这里使用 jquery 将非常容易，您所要做的就是导入带有<script>标签的 jquery 文件，然后您重新准备好！例如，您可以onclick="changeClass(this);"在<li>标签和普通 JavaScript 文件或脚本标签中执行以下操作：

function changeClass(this){
 $('#nav li').attr("class","");
 $(this).attr("class","current");
}

将“当前”替换为您要使用的类名

3）它应该已经设置为当前

4) 使用 :visited CSS 选择器来更改链接的颜色，例如：

a:visited{
 color: #000000;
}
于 2012-12-09T00:39:27.753 回答
0

首先，您应该从单独的脚本而不是onclick属性设置事件处理程序。您不会以这种方式重复您的代码并将任何东西放在一个地方。HTML 也更干净。

使用jQuery会很简单：

var menuLinks = jQuery( '#nav a' );

menuLinks.on( 'click' function() {

    menuLinks.removeClass( 'active' );
    $( this ).addClass( 'active' );

} );

你也可以在纯 JS 中做到这一点，但是使用一些库可以让你摆脱浏览器不兼容的麻烦。

于 2012-12-09T00:40:54.527 回答