<li class="banner1"><a href="[$WebUrl$]Default.aspx">首 页</a></li>
<li class="banner2"><a href="[$WebUrl$]pro.aspx">分类列表</a></li>
<li class="banner2"><a href="[$WebUrl$]special.aspx">特价商品</a></li>
<li class="banner2"><a href="[$WebUrl$]TeamShopping.aspx">团购商品</a></li>
<li class="banner2"><a href="[$WebUrl$]brand.aspx">品牌专卖</a></li>我现在想实现的效果是,当鼠标点了分类列表的时候,分类列表的class="banner1",其它都是class="banner2";当鼠标点了特价商品的时候,特价商品的class="banner1",其它都是class="banner2".怎么实现,谢谢
<li class="banner2"><a href="[$WebUrl$]pro.aspx">分类列表</a></li>
<li class="banner2"><a href="[$WebUrl$]special.aspx">特价商品</a></li>
<li class="banner2"><a href="[$WebUrl$]TeamShopping.aspx">团购商品</a></li>
<li class="banner2"><a href="[$WebUrl$]brand.aspx">品牌专卖</a></li>我现在想实现的效果是,当鼠标点了分类列表的时候,分类列表的class="banner1",其它都是class="banner2";当鼠标点了特价商品的时候,特价商品的class="banner1",其它都是class="banner2".怎么实现,谢谢
<li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li>
<li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li>
<li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li>
<li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li>
var CurrentCheck = "Li1";function ChangeCss(id)
{
var d =document.getElementById(id);
if(d != undefined)
{
d.className="banner1";
document.getElementById(CurrentCheck).className ="banner2";
CurrentCheck = id;
}
}
<li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li>
<li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li>
<li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li>
<li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li> 注意没,一开始加载的时候Li1是banner1。当点的时候是变了,但是点完了就又变成页面加载的时候的了………………
也就是点Li2的时候Li2是变为banner1,但是点完了,页面一加载就变成初始的了……
<li id="Li1" class="banner1">
<li id="Li2" class="banner2">
<li id="Li3" class="banner2">
<li id="Li4" class="banner2">
<li id="Li5" class="banner2">
<li id="Li1" class="banner1">
<li id="Li2" class="banner2">
<li id="Li3" class="banner2">
<li id="Li4" class="banner2">
<li id="Li5" class="banner2">
晕倒,
body onload="ChangeCss()"var myArr = new Array();
myArr[0]="Li1";
myArr[1]="Li2";
myArr[2]="Li3";
myArr[3]="Li4";
myArr[4]="Li5";var CurrentCheck="";
function ChangeCss()
{
var Url = document.location.href;
if(Url.indexOf("Default.aspx")>=0)
{
CurrentCheck ="Li1";
}
else if(Url.indexOf("pro.aspx")>=0)
{
CurrentCheck ="Li2";
}
else if(Url.indexOf("special.aspx")>=0)
{
CurrentCheck ="Li3";
}
else if(Url.indexOf("TeamShopping.aspx")>=0)
{
CurrentCheck ="Li4";
}
else
{
CurrentCheck ="Li5";
}
for(var i =0; i<myArr.length;i++)
{
if(myArr[i] == CurrentCheck)
{
document.getElementById(myArr[i]).className="banner1";
}
else
document.getElementById(myArr[i]).className="banner2";
}
}
<div id="nav">
<script language="javascript" type="text/javascript">
function myhomepage()
{
this.homepage.style.behavior='url(#default#homepage)';
this.homepage.sethomepage('http://www.hycs.cn');
}
body onload="ChangeCss()" var myArr = new Array();
myArr[0]="Li1";
myArr[1]="Li2";
myArr[2]="Li3";
myArr[3]="Li4";
myArr[4]="Li5"; var CurrentCheck="";
function ChangeCss(id)
{
var Url = document.location.href;
if(Url.indexOf("Default.aspx")>=0)
{
CurrentCheck ="Li1";
}
else if(Url.indexOf("pro.aspx")>=0)
{
CurrentCheck ="Li2";
}
else if(Url.indexOf("special.aspx")>=0)
{
CurrentCheck ="Li3";
}
else if(Url.indexOf("TeamShopping.aspx")>=0)
{
CurrentCheck ="Li4";
}
else
{
CurrentCheck ="Li5";
}
for(var i =0; i <myArr.length;i++)
{
if(myArr[i] == CurrentCheck)
{
document.getElementById(myArr[i]).className="banner1";
}
else
document.getElementById(myArr[i]).className="banner2";
}
}
</script>
<ul class="nav1">
<ul class="nav01">
<li class="nav1-1"><img src="[$WebUrl$]images/index_top1.jpg" alt="" /> </li>
<li class="nav1-2"><span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.hycs.cn');" style="cursor: hand">设为首页</span></li>
<li class="nav1-3"><img src="[$WebUrl$]images/index_top2.jpg" alt="" /></li>
<li class="nav1-2"><span style="cursor: hand" onclick="window.external.addFavorite('http://www.hycs.cn','红艳集团')" title="红艳集团">加入收藏</span></li>
</ul>
<ul class="nav02">
<li class="nav1-5">
<span style="float:left; margin:10px 0 0 0 ">{#MemberStateInfo#}</span>
<img src="[$WebUrl$]images/index_top3.jpg" alt="" />
<a href="[$WebUrl$]shoppingCart.aspx">购物车</a> |
<a href="[$WebUrl$]leaveWord.aspx">留言</a>|
<a href="[$WebUrl$]Turnson/Turnson1.aspx">我的圈子</a> |
<a href="[$WebUrl$]outStock.aspx">缺货登记</a> |
<a href="[$WebUrl$]helps/Index.aspx">帮助</a>
</li>
</ul>
</ul>
<ul class="logo">
<li class="logo1">
<a href="[$WebUrl$]Default.aspx"><img border="0" src="[$WebUrl$]images/logo.jpg" style="width:226px; height:55px" alt="" /></a>
</li>
<!--<li id="index_qiehuan"><font size="+1"><strong>[$MyCity$]</strong></font><br><a href=# onclick="openWithIframe('选择城市','/Controls/Area.aspx',550,420);" class="black">切换城市</a></li>-->
<li class="logo2">
<a href="[$WebUrl$]MemberCenter/index.aspx"><img src="[$WebUrl$]images/head_img2.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]PointCard.aspx?ID=0"><img src="[$WebUrl$]images/Orders.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]Auction.aspx"><img src="[$WebUrl$]images/Auction.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]shopall.aspx"><img src="[$WebUrl$]images/Shop.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]comment.aspx"><img src="[$WebUrl$]images/Appraise.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]news/Index.aspx"><img src="[$WebUrl$]images/head_img3.jpg" border="0" alt="" /></a>
<a href="[$WebUrl$]bbs/"><img src="[$WebUrl$]images/head_img4.jpg" border="0" alt="" /></a>
</li>
</ul>
<ul class="banner">
<ul class="banner0">
<ul class="bb_01">
<li id="bb"> </li>
<li id="Li1" class="banner1"><a href="[$WebUrl$]Default.aspx" onclick="ChangeCss('Li1')">首 页</a></li>
<li id="Li2" class="banner2"><a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表</a></li>
<li id="Li3" class="banner2"><a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品</a></li>
<li id="Li4" class="banner2"><a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品</a></li>
<li id="Li5" class="banner2"><a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖</a></li>
</ul>
<!--<ul class="bb_02">
<li class="banner3"><a href="[$WebUrl$]class.aspx?ID=76">时尚数码</a></li>
<li class="banner4"><a href="[$WebUrl$]class.aspx?ID=52">手 机</a></li>
<li class="banner4"><a href="[$WebUrl$]class.aspx?ID=41">电脑商品</a></li>
<li class="banner4"><a href="[$WebUrl$]class.aspx?ID=79">耗 材</a></li>
<li class="banner4"><a href="[$WebUrl$]class.aspx?ID=80">MP3</a></li>
<li class="banner4"><a href="[$WebUrl$]class.aspx?ID=61">数码商品</a></li>
</ul>-->
</ul>
<div id="headnav2">
<ul class="banner0-0">
<form action="[$WebUrl$]search.aspx" id="searchForm" name="searchForm">
<li><img src="[$WebUrl$]images/search_img1.jpg" alt="" /></li>
<li class="banner5">商品搜索:</li>
<li class="banner7"><input type="text" name="ProKeyword" class="indexSearchKeyWord" /></li>
<li class="banner6">{#YXShop_ClassForSearch*1#}</li>
<li class="banner8"><input type="image" src="[$WebUrl$]images/search_img2.jpg" border="0" /></li>
<li class="banner9"><a href="[$WebUrl$]searchPro.aspx">高级搜索</a></li>
<li class="banner6"><script type="text/javascript" src="/JS/Substation.js"></script> </li>
<li class="banner10"> </li>
</form>
</ul>
<!--<ul class="banner0-1">
<li><img src="[$WebUrl$]images/search_img3.jpg" alt="" /></li>
<li class="banner0-1-1">诚信交易 安全支付</li>
</ul>-->
</div>
</ul>
</div>
</div>
<li class="banner1"> <a name='tag' href="[$WebUrl$]Default.aspx" onclick="ChangeCss(this)">首 页 </a> </li>
<li class="banner2"> <a name='tag' href="[$WebUrl$]pro.aspx" onclick="ChangeCss(this)">分类列表 </a> </li>
<li class="banner2"> <a name='tag' href="[$WebUrl$]special.aspx" onclick="ChangeCss(this)">特价商品 </a> </li>
<li class="banner2"> <a name='tag' href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss(this)">团购商品 </a> </li>
<li class="banner2"> <a name='tag' href="[$WebUrl$]brand.aspx" onclick="ChangeCss(this)">品牌专卖 </a> </li> function ChangeCss(obj)
{
var d =document.getElementsByName("tag");
for(var i =0;i<d.length;i++)
{
d[i].parentElement.className="banner2";
}
obj.parentElement.className = 'banner1';
}
你需要在body的onload绑定到ChangeCss()
中
是在<body onload= "ChangeCss()">
把ChanageCss函数
写在head中
<head>
<script>
function ChangeCss()
{
....
}
</script>
</head>
<head id="Head1" runat="server">
<title></title>
</head>
<body onload= "ChangeCss()">
<form id="form1" runat="server">
<div align="center"></div>
</form>
</body>
</html>
后台调用方法把主页的HTML代码写到数据库:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>[$WebTitle$]-首页</title>
<link href="[$WebUrl$][$WebSkins$]/YXShop_Main.css" rel="stylesheet" type="text/css" />
<link href="[$WebUrl$][$WebSkins$]/YXShop_Head.css" rel="stylesheet" type="text/css" />
<script src="[$WebUrl$]configuration/js/Prototype.js" type="text/jscript"></script>
<script src="[$WebUrl$]configuration/js/public.js" type="text/jscript"></script>
<script type="text/javascript" language="javascript">
function Orders(OrderId)
{
if(OrderId=="")
{
alert("请输入订单号!");
return false;
}
SendAjax("ConMain",OrderId);
}
function SendAjax(op,OrderId)
{
var param = "Option="+ op +"&OrderId="+ OrderId;
var options={
method:'post',
parameters:param,
onComplete:
function(transport)
{
var retv=transport.responseText;
document.getElementById("ShowOrders").innerHTML=retv;
}
}
new Ajax.Request('Default.aspx',options);
}
</script>
</head>
<body>
{@YX_Header}
……………………
……………………
……………………
</body>
</html>
我要改的地方就是{@YX_Header},很多页面调用这个头文件:
<div id="head">
<div id="nav">
<script language="javascript" type="text/javascript">
function myhomepage()
{
this.homepage.style.behavior='url(#default#homepage)';
this.homepage.sethomepage('http://www.hycs.cn');
}
var myArr = new Array();
myArr[0]="Li1";
myArr[1]="Li2";
myArr[2]="Li3";
myArr[3]="Li4";
myArr[4]="Li5";
var CurrentCheck="";
function ChangeCss()
{
var Url = document.location.href;
if(Url.indexOf("Default.aspx")>=0)
{
CurrentCheck ="Li1";
}
else if(Url.indexOf("pro.aspx")>=0)
{
CurrentCheck ="Li2";
}
else if(Url.indexOf("special.aspx")>=0)
{
CurrentCheck ="Li3";
}
else if(Url.indexOf("TeamShopping.aspx")>=0)
{
CurrentCheck ="Li4";
}
else
{
CurrentCheck ="Li5";
}
for(var i =0; i <myArr.length;i++)
{
if(myArr[i] == CurrentCheck)
{
document.getElementById(myArr[i]).className="banner1";
}
else
document.getElementById(myArr[i]).className="banner2";
}
}
</script>
<ul class="nav1">
<ul class="nav01">
</ul>
<ul class="nav02">
</ul>
</ul>
<ul class="logo">
</ul>
<ul class="banner">
<ul class="banner0">
<ul class="bb_01">
<li id="bb"> </li>
<li id="Li1" class="banner1"> <a href="[$WebUrl$]Default.aspx" onclick="ChangeCss ('Li1')">首 页 </a> </li>
<li id="Li2" class="banner2"> <a href="[$WebUrl$]pro.aspx" onclick="ChangeCss('Li2')">分类列表 </a> </li>
<li id="Li3" class="banner2"> <a href="[$WebUrl$]special.aspx" onclick="ChangeCss('Li3')">特价商品 </a> </li>
<li id="Li4" class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx" onclick="ChangeCss('Li4')">团购商品 </a> </li>
<li id="Li5" class="banner2"> <a href="[$WebUrl$]brand.aspx" onclick="ChangeCss('Li5')">品牌专卖 </a> </li>
</ul>
</ul>
<div id="headnav2">
<ul class="banner0-0"> </ul>
</div>
</ul>
</div>
</div>
不可能给你一段代码,就直接能用的
你看一下,有没有提示什么错误...
比如找不到ChangeCss函数啊
你看一下Url这个变量的值是什么?
然后和程序比对着看看,哪里出问题了..
{
var tag = document.cookie.split(';')[0];
ChangeCss(null,tag) ;
}function ChangeCss(obj,changTag)
{
var d =document.getElementsByName("tag");
var tag = 0
for(var i =0;i<d.length;i++)
{
if(d[i] == obj) tag = i;
d[i].parentElement.className="banner2";
}
if(obj != null)
obj.parentElement.className = 'banner1';
else
d[changTag].parentElement.className = 'banner1';
document.cookie = tag ;
}
</script>
<input onclick="a()" style="cursor:pointer;" value = "click here">
<li class="banner1"> <a name='tag' href="#" onclick="ChangeCss(this)">首 页 </a> </li>
<li class="banner2"> <a name='tag' href="#" onclick="ChangeCss(this)">分类列表 </a> </li>
<li class="banner2"> <a name='tag' href="#" onclick="ChangeCss(this)">特价商品 </a> </li>
<li class="banner2"> <a name='tag' href="#" onclick="ChangeCss(this)">团购商品 </a> </li>
<li class="banner2"> <a name='tag' href="#" onclick="ChangeCss(this)">品牌专卖 </a> </li>
window.onload=function()
{
var tag = document.cookie.split(';')[0];
ChangeCss(null,tag) ;
document.cookie = tag };
}
1: a 标签的 href 改为你的 url
2: 在跳转的叶面中想办法引入 那两个函数
搞定?
<li class="banner2"> <a href="[$WebUrl$]pro.aspx">分类列表 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]special.aspx">特价商品 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx">团购商品 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]brand.aspx">品牌专卖 </a> </li> ========================
他们在你的头部文件里?如果是,好办...
给LI加上ID
onload=function(){
var path=window.location.pathname;
switch(path){
case "首 页 ":
document.getElementById("liId").className="*****";
break;
...
...
}}
没引入我写的onload函数?
写了应该就可以了啊 主要是注意在每个页面加载时保存好当前选择项的 索引 就好了这个应该很好办到吧
<input type=hidden name=dqmenu id=dqmenu runat=server>你的代码太乱,看起来眼放花,没时间帮你改了...
var url = window.location+'';
var p = url.substr(url.lastIndexOf("/")+1).toLowerCase();
for(var i=1;i<6;i++)
{
document.getElementById("Li"+i).className="banner2";
if(document.getElementById("Li"+i).childNodes[0].href.toLowerCase().indexOf(p)!=-1)
document.getElementById("Li"+i).className="banner1";
}
};