一个JS+CSS的问题 var li = document.getElementById("active")li.getElementsByTagName("a")[0].id = li.id; 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 #active { ...}改成:#active a{ ...}就可以实现为何楼主要用js 不好意思,我把完整的代码都发上来吧,你帮我改一下,我对CSS这些都不是太了解,又要急用,呵呵<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html> <head> <title>ZDnet Emulation Preview</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"><!--/* CSS Tabs */#navcontainer { background: #369; border-top: 1px solid #9CC; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;}#navlist { list-style: none outside none; margin: 0; padding: 0;}@media all { #navlist { text-align: left }}#navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative;}html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0;}#navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none;}#navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px;}#navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px;}#navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative;}html>body #navlist li#active { background: #000; margin: 0 4px 0 4px;}#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0;}--></style> </head> <body> <h4></h4><br /><br /> <div id="navcontainer"> <ul id="navlist"> <!-- CSS Tabs --> <li id="active"><a id="current" href="mid.html" target ="midframe"> 首 页 </a></li> <li><a href="mid.html" target ="midframe"> 统 计 管 理 </a></li> <li><a href="mid.html" target ="midframe"> 录 入 管 理 </a></li> <li><a href="mid.html" target ="midframe"> 查 询 管 理 </a></li> <li><a href="mid.html" target ="midframe"> 网 站 管 理 </a></li> </ul> </div> </body></html> css有些乱,但基本没问题,不明白楼主是什么意思,要改成什么样子? 比如说点击<网 站 管 理>标签吧,该标签变为<首页>标签的样式,<首页>标签则还原为跟其它标签一样的样式,点击任意标签都得到这样的效果.类似Tabs的样式.不知道我这样说清楚了吗,呵呵,有点弱. 最简单应该就是交换<li>的id<li id="active"><a href="mid.html" target ="midframe" onclick="f(this)"> 首 页 </a></li><li><a href="mid.html" target ="midframe" onclick="f(this)"> 统 计 管 理 </a></li><li><a href="mid.html" target ="midframe" onclick="f(this)"> 录 入 管 理 </a></li><li><a href="mid.html" target ="midframe" onclick="f(this)"> 查 询 管 理 </a></li><li><a href="mid.html" target ="midframe" onclick="f(this)"> 网 站 管 理 </a></li><script language=javascript>function f(obj){ var li = document.getElementById("active"); var objLi = obj.parentNode; if(li != objLi){ li.removeAttribute("id"); objLi.setAttribute("id","active"); }}</script> JS的load事件无效,该怎么办呢? 请问如何实现点击span下面的a显示出来 超好的效果,我源代码拿下来运行不了,求助 为什么我下面这样调用里面的同id div 不行?? 求救:请各位高手帮我看看下面的代码是否有错误???在线等 很简单的基础问题! 奇葩!关于alert的疑惑 如何在页面中用JavaScript解析xml文件 请问一个文本输入框的小问题,客户端验证设置. 写了一个对象,定义了对象的属性和方法,对象本身方法如何调用呢。 让createElement创建的div层,始终在屏幕的中央,位置怎么控制啊! 超简单的问题,求段JS代码!
...
}
改成:
#active a{
...
}
就可以实现
为何楼主要用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html>
<head>
<title>ZDnet Emulation Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
}#navlist {
list-style: none outside none;
margin: 0;
padding: 0;
}@media all {
#navlist {
text-align: left
}
}#navlist li {
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}#navlist a:active {
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}#navlist li#active {
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}html>body #navlist li#active {
background: #000;
margin: 0 4px 0 4px;
}#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}
-->
</style>
</head> <body>
<h4></h4>
<br /><br /> <div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li id="active"><a id="current" href="mid.html" target ="midframe"> 首 页 </a></li>
<li><a href="mid.html" target ="midframe"> 统 计 管 理 </a></li>
<li><a href="mid.html" target ="midframe"> 录 入 管 理 </a></li>
<li><a href="mid.html" target ="midframe"> 查 询 管 理 </a></li>
<li><a href="mid.html" target ="midframe"> 网 站 管 理 </a></li>
</ul>
</div>
</body>
</html>
<li><a href="mid.html" target ="midframe" onclick="f(this)"> 统 计 管 理 </a></li>
<li><a href="mid.html" target ="midframe" onclick="f(this)"> 录 入 管 理 </a></li>
<li><a href="mid.html" target ="midframe" onclick="f(this)"> 查 询 管 理 </a></li>
<li><a href="mid.html" target ="midframe" onclick="f(this)"> 网 站 管 理 </a></li>
<script language=javascript>
function f(obj){
var li = document.getElementById("active");
var objLi = obj.parentNode;
if(li != objLi){
li.removeAttribute("id");
objLi.setAttribute("id","active");
}
}
</script>