on单击javascript:navigation with changeing css background imag
onClick javascript: navigation with changing css background images / two types
我正在做一个有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相关的函数也是如此。
如果您需要所有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)
的调用。
附言:没有关联,但我目前的浏览器(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
}
}
- CSS-如何定位内容数据标题
- 窗口大小html css
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 动画.CSS重播
- 有没有一种方法可以防止img get请求使用css或js发生
- CSS表格:从列平移到整个表格宽度
- CKEditor-我在editor.css中的风格是't
- 单击更改图标并通过javascript添加一个css类
- 将CSS应用于printWindow.print();在Javascript中
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- css(或jQuery)悬停时淡入淡出
- 为什么不'在JQuery中找到第二个css选择器的工作
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- 如何使用css动画/javascript使具有背景图像的元素出现
- 获取HTML属性中CSS声明的值
- 当我更改Joomla时,它仍然从旧域加载CSS和Javascript
- 如何使用css动画从中心增加边界线
- 谷歌图表-如何更改整个表的css属性
- on单击javascript:navigation with changeing css background imag