要达到的目标是,其中一个图层可见,其他两个隐藏,以及其中一个有中间线,另外两个没有。
function nav(){
var na1 = document.getElementById("nv1");
var na2 = document.getElementById("nv2");
var na3 = document.getElementById("nv3");
var ls1 = document.getElementById("li1");
var ls2 = document.getElementById("li2");
var ls3 = document.getElementById("li3"); ls1.onclick=function() {
ls1.style.textDecoration="line-through";
ls2.style.textDecoration="none";
ls3.style.textDecoration="none";
na1.style.display="block";
na2.style.display="none";
na3.style.display="none";
}
ls2.onclick=function() {
ls1.style.textDecoration="none";
ls2.style.textDecoration="line-through";
ls3.style.textDecoration="none";
na1.style.display="none";
na2.style.display="block";
na3.style.display="none";
}
ls3.onclick=function() {
ls1.style.textDecoration="none";
ls2.style.textDecoration="none";
ls3.style.textDecoration="line-through";
na1.style.display="none";
na2.style.display="none";
na3.style.display="block";
}
}
window.onload=nav;
function nav(){
var na1 = document.getElementById("nv1");
var na2 = document.getElementById("nv2");
var na3 = document.getElementById("nv3");
var ls1 = document.getElementById("li1");
var ls2 = document.getElementById("li2");
var ls3 = document.getElementById("li3"); ls1.onclick=function() {
ls1.style.textDecoration="line-through";
ls2.style.textDecoration="none";
ls3.style.textDecoration="none";
na1.style.display="block";
na2.style.display="none";
na3.style.display="none";
}
ls2.onclick=function() {
ls1.style.textDecoration="none";
ls2.style.textDecoration="line-through";
ls3.style.textDecoration="none";
na1.style.display="none";
na2.style.display="block";
na3.style.display="none";
}
ls3.onclick=function() {
ls1.style.textDecoration="none";
ls2.style.textDecoration="none";
ls3.style.textDecoration="line-through";
na1.style.display="none";
na2.style.display="none";
na3.style.display="block";
}
}
window.onload=nav;
解决方案 »
- fusioncharts link求帮助
- 请教一个函数调用的问题
- 比较难的问题,怎样把一个HTML元素从一个主窗口中移动到一个iframe的子窗口中?
- 如何用javascript取得当前页面的charset???
- 为什么添加了function updateSales()之后连js里第一个alert都不显示?
- 关于一个滑动选项卡的问题,哪位大哥帮忙改一下呀。
- 100分求一个比较一维数组中数字大小的JAVASCRIPT程序!UP有分!
- javascript中有没有类似java中的java.net.URLEncode类中的encode方法?谢谢大家!
- 请问怎么在提交表单的时候不禁用html,禁用js呀?
- 两个js方法是一样的 都是拼接相同的html 但是id有的不同 怎么抽出一个公共方法,然后传入不同的id生成html
- 请教个js打开新窗口的问题
- 急求Firefox下JS问题,style.display
div {
width:100px;
float:left;
background-color:#CCCCCC;
}
.width {
width:300px;
height:100px;
clear:both;
background-color:#F4F4F4;
display:none;
}
</style>
<script type="text/javascript">
var $ = function (id) {
return id.constructor == String ? document.getElementById(id) : id;
};var function1 = function (argy) {
for (i = 0 ; i < argy.length ; i ++) {
if (argy[i].left == this) {
argy[i].left.style.textDecoration = "line-through", argy[i].right.style.display = "block";
} else {
argy[i].left.style.textDecoration = argy[i].right.style.display = "none";
}
}
};
function nav() { var elem = [
{ left : $("li1"), right : $("nv1") },
{ left : $("li2"), right : $("nv2") },
{ left : $("li3"), right : $("nv3") }
], i;
for (i = 0 ; i < elem.length ; i ++)
elem[i].left.onclick = function () { function1.call(this, elem); };
}
window.onload = nav;
</script>
<div id="li1" style="text-decoration:line-through">li1</div>
<div id="nv1" style="display:block;" class="width">nv1</div>
<div id="li2">li2</div>
<div id="nv2" class="width">nv2</div>
<div id="li3">li3</div>
<div id="nv3" class="width">nv3</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MENU</title>
<style type="text/css">
div#CMenu {
width:500px;
border:#CCCCCC 1px solid;
}
div#CMenu h4 {
width:20%;
float:left;
margin:0px;
text-align:center;
font-size:12px;
font-weight:normal;
line-height:24px;
background-color:#F4F4F4;
border-bottom:#CCCCCC 1px solid;
cursor:default;
}div#CMenu h4.Default {
background-color:#E0E0E0!important;
}div#CMenu div.Default {
display:block!important;
}div#CMenu div {
line-height:20px;
display:none;
background-color:#FAFAFA;
}
</style>
<script type="text/javascript">
var Class = {
//创建类
create : function () {
return function () {
this.initialize.apply(this, arguments);
};
}
};var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};var $ = function (id) {
//获取对象
return document.getElementById(id);
};Function.prototype.bind = function () {
//绑定事件
var wc = this, a = $A(arguments), o = a.shift();
return function () {
wc.apply(o, a.concat($A(arguments)));
};
};(function (bool) {
//兼容FF
var html;
if (bool) {
html = window.HTMLElement.prototype;
window.attachEvent = document.attachEvent = html.attachEvent = function (property, func, bool) {
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
};
html.__defineSetter__("className", function (t_val) {
return this.setAttribute("class") = t_val;
});
html.__defineGetter__("className", function () {
return this.getAttribute("class");
});
}
})(/Firefox/.test(window.navigator.userAgent));var CMenu = Class.create();CMenu.prototype = { initialize : function (time) {
//初始化参数
var wc = this;
wc.time = time; //初始化滑动延迟时间
wc.timer = 0; //初始化记时器存储变量
wc.old = { tit : null, con : null }; //初始化当前目标成员
wc.style = ""; //默认样式
},
change : function (object) {
//设置样式
var wc = this, old = wc.old, style = wc.style;
if (object.tit == old.tit) return;
if (old.tit) old.tit.className = old.con.className = "";
(old.tit = object.tit).className = (old.con = object.con).className = style;
wc.timer = 0;
},
look : function (obj) {
//延迟控制
var wc = this;
if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除
wc.timer = window.setTimeout(wc.change.bind(wc, obj), wc.time);
},
over : function (obj) {
//鼠标经过函数
var wc = this;
wc.look(obj);
},
out : function (obj) {
//鼠标移开函数
var wc = this;
if (wc.timer) {
window.clearTimeout(wc.timer);
wc.timer = 0;
}
},
add : function (obj) {
//添加成员
var wc = this;
obj.tit.attachEvent("onmouseover", wc.over.bind(wc, obj));
obj.tit.attachEvent("onmouseout", wc.out.bind(wc, obj));
},
parse : function (div, style) {
//解释对象
var wc = this, tits = div.getElementsByTagName("h4"), cons = div.getElementsByTagName("div"), i;
try {
wc.style = style;
wc.change({ tit : tits[0], con : cons[0] }, style);
for (i = 0 ; i < tits.length ; i ++)
wc.add({ tit : tits[i], con : cons[i] }, style);
} catch (exp) {}
}};window.onload = function () {
var wc = new CMenu(200);
wc.parse(document.getElementById("CMenu"), "Default");
wc = null;
};
</script>
</head><body>
</body>
</html><div id="CMenu">
<h4>第一栏</h4>
<h4>第二栏</h4>
<h4>第三栏</h4>
<h4>第四栏</h4>
<h4>第五栏</h4>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
不过对于二楼的回答我才疏学浅不是很懂,和我的思路不是很相同。
至于三楼的答案似乎没有 起到简化的作用。我只是想能不能用简单的if或for语句来实现。