Question

我正在做一个包含2个导航（导航）的网站，包括链接，每个链接都在另一个div中。

单击链接时，应在css（更改类）中更改其背景图像。并且只有一个类的链接可以改变背景。

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

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

网站：http://enlifer.de/test25/zp-kazachkova.html

第二个导航位于徽标的高度。如果在第二个导航中单击“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>

的的JavaScript 的

<script type="text/javascript">
function mark(cell)
{
for(i=0; i <
document.getElementById("nav").getElementsByTagName("li").length; i++)
{
document.getElementById("nav").getElementsByTagName("li")[i].className="link";
}
cell.className="linkactive";
}

function l_mark(cell)
{
for(i=0; i <
document.getElementById("up").getElementsByTagName("li")[0].length; i++)
{
document.getElementById("up").getElementsByTagName("li")[0][i].className="uplink-l";
}
cell.className="uplink-l-active";
}

function i_mark(cell)
{
for(i=0; i <
document.getElementById("up").getElementsByTagName("li")[1].length; i++)
{
document.getElementById("up").getElementsByTagName("li")[1][i].className="uplink-i";
}
cell.className="uplink-i-active";
}

window.onload = setActive;
</script>

谢谢！

Answer 1

“Leistungen”有lmark类，而“Impressum”有imark。您对Lmark-classed元素的Javascript函数会重置所有其他lmark-classed元素的背景，但不会重置imark类的元素。与涉及imark的功能相同。

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

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
    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
}

然后，您对l_mark(this)和i_mark(this)的所有来电都应该被li_mark(this)的来电取代。

P.S。：不相关，但我当前的浏览器（Firefox）似乎不喜欢window.onload=setActive;，说“setActive未定义”......

根据评论进行编辑，看过您的JS文件（scripttests.js）：

您仍需要2个功能mark()和li_mark()，因为对于mark()，您的有效课程格式为<className>active而不是<className>-X-active（不是在命名类时使用相同的模式，而不需要检索字符Lor I）。

问题的另一部分是你在一个函数中的同一个单元格上调用cell.className+="-active"两次。

问题的最后一部分是你忘记了第二个循环的if内的指令：由于没有块括号，当if为真时执行的指令是{ {1}} ...执行循环次数并且cell.className+="-active"为真。

（可能）工作版本将是：

if

onClick javascript：导航改变css背景图像/两种类型

1 个答案: