setAttribute在Safari中运行,而不在IE中
我已阅读关于此主题的许多帖子,但没有一篇适合我的问题。在img标签上的onclick动作中,我想要发生几件事情。setAttribute在Safari中运行,而不在IE中
- 图像必须改变(+到 - 或反之亦然);
- set de alt for img tag;
- 重写onclick动作以指向将来的另一个函数。
- 隐藏(或取消隐藏)一个div(包括ofcourse内容。
这在Safari工作完美无瑕(在使用Mac),但我正在写(和将使用这个菜单)的应用将主要被用于。在IE嘛,你猜怎么着,它不能在IE浏览器
我已经建立2个功能,一些CSS和HTML offcourse下面是一些片段:。
的JavaScript:
function changeDaSign(menuNumber) {
if (menuNumber=='menu1') {
document.getElementById("submenu1_sign").setAttribute("src","images/minus.gif");
document.getElementById("submenu1_sign").setAttribute("alt","-");
document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSignBack('menu1')");
document.getElementById("submenu1").setAttribute("class","submenu");
}
function changeDaSignBack(menuNumber) {
if (menuNumber=='menu1') {
document.getElementById("submenu1_sign").setAttribute("src","images/plus.gif");
document.getElementById("submenu1_sign").setAttribute("alt","+");
document.getElementById("submenu1_sign").setAttribute("onclick","changeDaSign('menu1')");
document.getElementById("submenu1").setAttribute("class","hidden");
}
的CSS:
.hidden {
display: none;
color:#444;
}
ul.menu {
margin-left:5px;
color: #C00;
list-style-type: none;
}
ul.submenu {
margin-left: 10px;
color: #C90;
list-style-type: none;
}
a.tobemade {
font-style:normal;
text-decoration: none;
color: #C00;
}
div.submenu {
border: #00F thin solid"
}
的HTML:
<ul class="menu">
<li>
<img id="submenu1_sign" src="images/plus.gif" alt="+" onclick="changeDaSign('menu1')"; return false; />
<a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;>Menu Item 1</a>
<div class="hidden" id="submenu1">
<ul class="submenu" id="submenu1">
<li>
<a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 11 </a>
</li>
<li>
<a href="#" class="tobemade" onclick="nav_other_div_to_other_content(arg_meegeven)"; return false;> submenu item 12 </a>
</li>
</ul>
</div>
</li></ul>
建议,帮助在IE和Safari浏览器,请这方面的工作,以及对代码整形手术。
你不需要两个处理程序。只是这样的:
HTML:
<ul class="menu">
<li>
<img src="images/plus.gif" alt="+">
<a href="#">Menu Item 1</a>
<ul class="hidden">
<li>
<a href="#">submenu item 11</a>
</li>
<li>
<a href="#">submenu item 12</a>
</li>
</ul>
</li>
</ul>
的JavaScript:
img.onclick = function() {
var submenu = this.parentNode.getElementsByTagName('ul')[0];
if (this.alt === '+') {
this.alt = '-';
this.src = 'images/minus.gif';
submenu.className = 'submenu';
} else {
this.alt = '+';
this.src = 'images/plus.gif';
submenu.className = 'hidden';
}
};
非常感谢。尽管如此,我已经解决了这个问题。看到我自己的答案。 – 2012-01-03 09:46:11
,我决定使用一个jQuery之类的函数,所以我自己的问题:
$(document).ready(function() {
$("img").click(function() {
var whichSubmenu ="div #"+$(this).get(0).id;
var imgPlusOrMinus=new RegExp("plus");
$(whichSubmenu).toggle();
if (imgPlusOrMinus.test($(this).get(0).src) == true) {
$(this).attr("src","images/minus.gif");
$(this).attr("alt","-");
} else {
$(this).attr("src","images/plus.gif");
$(this).attr("alt","-");
}
});
});
比较优雅。它确实给我带来了另一个难题。任何人都可以启发我,为什么下面的代码可以做和不行?
这不结合上述jQuery函数工作:
<li>
<img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1
<div class="submenu" id="submenu1" >
<ul class id="submenu1">
<li>submenu item 11</li>
</ul>
</div>
</li>
In CSS file:
ul.submenu {
list-style-type: none;
}
div.submenu {
display: none;
}
这确实结合工作与上述jQuery函数:
<li>
<img id="submenu1" src="images/plus.gif" alt="+"/>Menu Item 1
<div id="submenu1" >
<ul class="submenu" id="submenu1">
<li>submenu item 11</li>
</ul>
</div>
</li>
In CSS file:
ul.submenu {
list-style-type: none;
display: none;
}
好像我的,我清楚的说明var whichSubmenu DIV必须切换。
其他信息我不想要默认隐藏的子菜单项并在点击后显示。
Arrggghhhh ....
现在就完美了。问题是...var声明中的div en#之间的空格。这导致脚本不处理div#someId,而是div #someId,它是第一个div和每个#someId。 BooHoooo ...
这里工作的脚本:
--------- jQuery: ----------
$(document).ready(function() {
$("img").click(function() {
var whichSubmenu ="div#"+$(this).get(0).id;
var imgPlusOrMinus=new RegExp("plus");
$(whichSubmenu).toggle();
if (imgPlusOrMinus.test($(this).get(0).src) == true) {
$(this).attr("src","images/minus.gif");
$(this).attr("alt","-");
} else {
$(this).attr("src","images/plus.gif");
$(this).attr("alt","-");
}
});
});
--------- HTML: ------------
<div>
<ul class="menu">
<li>
<img id="submenu1" src="images/plus.gif" alt="+"/><a href="#" class="tobemade" return false;>Menu Item 1</a>
<div class="submenu" id="submenu1" >
<ul class="submenu">
<li><a href="…> submenu item 11 </a> </li>
<li><a href="...> submenu item 12 </a> </li>
</ul>
</div>
</li>
</ul>
</div>
------- CSS: ---------
ul.submenu {
list-style-type: none;
}
div.submenu {
display: none;
}
'document.getElementById'出现8次在14线长代码块。这是一个相当长的名字,考虑别名... – 2011-12-29 02:24:55