onClick javascript：通过更改css背景图像/两种类型进行导航

我正在做一个网站与2导航（导航），包括链接，其中每一个在另一个分区

当一个链接被点击时，它应该在css中改变它的背景图像（change类）。 它的类只有一个链接可以改变背景

在第二个导航中，有一条链路也包含在导航1中。 在第二个导航中还有两个不同的背景图像要“切换”

我已经完成了第一个导航，但我不知道如何包括第二个导航。 第二个问题是，两个链接不应同时改变其背景

网站：

第二个导航位于徽标的高度。 如果在第二个导航中单击“Leistungen”，则第一个导航也应更改其默认背景，反之亦然

以下代码是相关的

首次导航

<navigation>
    <ul id="nav">

        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Kontakt</a>    </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Anfahrt</a>    </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Leistungen</a> </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Praxisteam</a> </li>

    </ul>

</navigation>

<up>
    <ul id="up">

        <li class="uplink-l" onclick="l_mark(this)">    <a href="#" class="uptextlink-l">Leistungen</a> </li>
        <li class="uplink-i" onclick="i_mark(this)">    <a href="#" class="uptextlink-i">Impressum</a>  </li>

    </ul>

</up>

第二导航

<navigation>
    <ul id="nav">

        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Kontakt</a>    </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Anfahrt</a>    </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Leistungen</a> </li>
        <li class="link" onclick="mark(this)">  <a href="#" class="textlink">Praxisteam</a> </li>

    </ul>

</navigation>

<up>
    <ul id="up">

        <li class="uplink-l" onclick="l_mark(this)">    <a href="#" class="uptextlink-l">Leistungen</a> </li>
        <li class="uplink-i" onclick="i_mark(this)">    <a href="#" class="uptextlink-i">Impressum</a>  </li>

    </ul>

</up>

JavaScript

功能标记（单元）
{
对于（i=0；i<
document.getElementById（“nav”）.getElementsByTagName（“li”）.length；i++）
{
document.getElementById（“nav”）.getElementsByTagName（“li”）[i].className=“link”；
}
cell.className=“linkactive”；
}
功能l_标记（单元）
{
对于（i=0；i<
document.getElementById（“up”）.getElementsByTagName（“li”）[0]。长度；i++）
{
document.getElementById（“up”）.getElementsByTagName（“li”）[0][i].className=“uplink-l”；
}
cell.className=“上行-l-active”；
}
功能i_标记（单元）
{
对于（i=0；i<
document.getElementById（“up”）.getElementsByTagName（“li”）[1]。长度；i++）
{
document.getElementById（“up”）.getElementsByTagName（“li”）[1][i].className=“uplink-i”；
}
cell.className=“上行-i-active”；
}
window.onload=setActive；

谢谢

“Leistungen”有类标记，而“Impressum”有类标记。用于lmark类元素的Javascript函数会重置所有其他lmark类元素的背景，但不会重置imark类元素的背景。与imark相关的函数也是如此

如果所有lmark和imark元素只需要一个非默认背景，则正确的（可能是正确的，但未经测试）代码是：

然后，所有对

l\u标记（this）

和

i\u标记（this）

的调用都应该被对

li\u标记（this）

的调用所取代

注意：没有关系，但我当前的浏览器（Firefox）似乎不喜欢

窗口。onload=setActive，表示“未定义setActive”

查看您的JS文件（
scripttests.JS
）后，根据评论编辑：

您仍然需要两个函数，
mark（）
和
li\u-mark（）
，因为对于
mark（）
，您的活动类的形式是
active
，而不是
-X-active
（在命名类时的模式不同，并且不需要检索字符LORI）

问题的另一部分是，在一个函数中，对同一个单元格调用了两次
cell.className+=“-active”

问题的最后一部分是您忘记了第二个循环的
if
中的指令：由于没有块括号，因此当该
if
为true时执行的指令是
cell.className+=“-active”
。。。循环运行且
为true时执行的次数与
相同

一个（可能）工作版本是：

function li_mark(cell) {
    var elts=document.getElementById("up").getElementsByTagName("li"); //store the elements we need in a local variable so we don't have to rewrite all that line (and the browser won't have to do the fetching job again), we don't care if they're L-type or I-type
    for(var i in elts)
        if(elts[i].className && elts[i].className.length>=8) //check if there is a className and it is at least as long as "uplink-X", otherwise we don't process the element and skip to the next
            elts[i].className="uplink-"+elts[i].className.charAt(7); //we retrieve the letter for the type of class (L or I), and we append it to "upload-" to redefine the class of the current element
    if(cell && cell.className && cell.className.length>=8) { //if we passed an argument, then it must be a cell to activate, with a basic check on its className
        cell.className+="-active"; //after the loop, all elements have their default class, so we just need to append "-active" to the one we want to be active
        mark(); //we call mark() with no argument to reset all the items managed by mark(), we call it in this if-block to avoid infinite recursion
    }
}
function mark(cell) {
    var elts=document.getElementById("nav").getElementsByTagName("li"); //store the elements we need in a local variable so we don't have to rewrite all that line (and the browser won't have to do the fetching job again), we don't care if they're L-type or I-type
    for(var i in elts)
        if(elts[i].className) //check if there is a className, otherwise we don't process the element and skip to the next
            elts[i].className="link"; //we set back to the default class
    if(cell && cell.className) { //if we passed an argument, then it must be a cell to activate
        cell.className+="active"; //after the loop, all elements have their default class, so we just need to append "active" to the one we want to be active
        li_mark(); //we call li_mark() with no argument to reset all the items managed by li_mark(), we call it in this if-block to avoid infinite recursion
    }
}

仅供参考，您的代码泄漏了一个全局
i
我是javascript新手，我已经尝试总结整个代码，但它没有以现在的方式工作。但是我知道你的意思，我假设代码需要“如果”条件。全局我让所有元素改变背景图像？！谢谢它在为第二个导航工作！但是，如何使第一个导航中的“Leistungen”链接在单击第二个导航上的链接的同时改变其背景呢？我会用if子句来实现，但我不知道如何实现它。我有以下几行代码作为想法：var nav1=document.getElementById（“nav”）.getElementsByTagName（“li”）；var nav2=document.getElementById（“up”）.getElementsByTagName（“li”）用我对新代码的解释更新了我的网站似乎有问题。。。-活动部件在单击后被复制5或6次无法使用
document.getElementsByClassName（'test'）？