62,046
社区成员
发帖
与我相关
我的任务
分享请看这个网站的左边导航变色如何做的?
http://www.keenstar.net/NewsCenter/GroupNews.aspx
上面这个网站的左边导航的集团新闻，媒体报道，地产资讯这三个点击后变色，另外的则不变，这个效果如何做的？
找到下面这段代码可能实现上面所说的效果，但是链接改成网址刷新后就不行了。
如：<a href="#">asdfasdf</a></div>
改成<a href="a.aspx">asdfasdf</a></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=utf-8" />
<title>表格</title>
<style>
.left_nav_div
{
width: 220px;
}
.left_nav
{
background: #999900;
line-height: 28px;
}
.left_nav_now
{
background: #00FFFF;
line-height: 28px;
}
</style>
</head>
<body>
<div class="left_nav_div" id="leftmenu">
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav_now">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
</div>
<script>
divs = document.getElementById("leftmenu").getElementsByTagName("div");
var $prevHot = null;
for (var i = 0; i < divs.length; ++i) {
var x = divs[i];
if (x.className == 'left_nav_now') $prevHot = x;
x.onclick = function () {
if ($prevHot)
$prevHot.className = 'left_nav';
this.className = 'left_nav_now';
$prevHot = this;
}
};
</script>
</body>
</html>
上面这个网站的左边导航的集团新闻，媒体报道，地产资讯这三个点击后变色，另外的则不变，这个效果如何做的？
找到下面这段代码可能实现上面所说的效果，但是链接改成网址刷新后就不行了。
如：<a href="#">asdfasdf</a></div>
改成<a href="a.aspx">asdfasdf</a></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=utf-8" />
<title>表格</title>
<style>
.left_nav_div
{
width: 220px;
}
.left_nav
{
background: #999900;
line-height: 28px;
}
.left_nav_now
{
background: #00FFFF;
line-height: 28px;
}
</style>
</head>
<body>
<div class="left_nav_div" id="leftmenu">
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav_now">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
<div class="left_nav">
<a href="#">asdfasdf</a></div>
</div>
<script>
divs = document.getElementById("leftmenu").getElementsByTagName("div");
var $prevHot = null;
for (var i = 0; i < divs.length; ++i) {
var x = divs[i];
if (x.className == 'left_nav_now') $prevHot = x;
x.onclick = function () {
if ($prevHot)
$prevHot.className = 'left_nav';
this.className = 'left_nav_now';
$prevHot = this;
}
};
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
