on单击javascript:navigation with changeing css background imag

onClick javascript: navigation with changing css background images / two types

本文关键字:changeing css background imag with navigation 单击 javascript on      更新时间:2023-09-26

我正在做一个有2个导航(nav)的网站,包括链接,每个导航都在另一个分区中。

当点击一个链接时,它应该在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>

谢谢!

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

如果您需要所有lmarkimark元素只有一个非默认背景,则正确的(可能是正确的,但未测试)代码是:

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)的调用。

附言:没有关联,但我目前的浏览器(Firefox)似乎不喜欢window.onload=setActive;,说"没有定义setActive"。。。

根据评论进行编辑,已看到您的JS文件(scripttests.js):

您仍然需要两个函数,mark()li_mark(),因为对于mark(),您的活动类的形式是<className>active,而不是<className>-X-active(在命名类时的模式不同,并且不需要检索字符Lor I)。

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

问题的最后一部分是,您忘记了第二个循环的if中的指令:由于没有块括号,当这个if为true时执行的指令是cell.className+="-active"。。。执行与循环运行一样多的次数并且CCD_ 15为真。

一个(可能)工作版本是:

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