省略号代表循环添加的部分,index1...indexn...
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
if (thisURL.indexOf("index1")>0){
document.getElementById("index1").className="now";
document.getElementById("index2").className="";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
...
}if (thisURL.indexOf("index2")>0){
document.getElementById("index1").className="";
document.getElementById("index2").className="now";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
....
}
.
.
.
.
.
</script>
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
if (thisURL.indexOf("index1")>0){
document.getElementById("index1").className="now";
document.getElementById("index2").className="";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
...
}if (thisURL.indexOf("index2")>0){
document.getElementById("index1").className="";
document.getElementById("index2").className="now";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
....
}
.
.
.
.
.
</script>
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
for(var i=1;i<n;i++){
var index="index"+i;
if (thisURL.indexOf(index)>0){
document.getElementById(index).className="now";
}else{
document.getElementById(index).className="";
}
}
</script>
for(var i=1;i<=n;i++){
if (thisURL.indexOf("i")>0){
for (var j=1;j<=n;j++){
document.getElementById("index"+j).className="";
}
document.getElementById("index"+i).className="now";
}
}
for(var i=0 ,len = 8 ;i<len;i++)
{
document.getElementById("index"+i).className=(thisURL.indexOf("index"+i)!=-1?"now":"");
}
iArr=1;
for(i=0;i<10;i++){
if(thisURL.indexOf("index"+i)>0){
while (document.getElementById("index"+iArr)){
document.getElementById("index"+iArr).className="";
iArr++;
}
document.getElementById("index"+i).className="now";
break;
}
}
iArr=1;
for(i=0;i<10;i++){
if(thisURL.indexOf("index"+i)>0){
while (document.getElementById("index"+iArr)){
document.getElementById("index"+iArr).className="";
iArr++;
}
document.getElementById("index"+i).className="now";
break;
}
}
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
for(var i=1;i<n;i++){
document.getElementById('index'+i).className=thisURL.indexOf('index'+i)>0 ? 'now' : '';
}
}
</script>
for(var i=0 ,len = 8 ;i<len;i++){
document.getElementById("index"+i).className ='';
}
var index = (document.URL).toLowerCase( ).match(/index\d+/g);
document.getElementById(index).className='now';
<a id="index2" href="about.asp">1</a>
<a id="index3" href="about.asp">1</a>
.
.
.
.
你把thisURL贴出来,或者用thisURL=location.href.toLowerCase( );试试
<a id="index2" href="about.asp?id=index2">1</a>
<a id="index3" href="about.asp?id=index3">1</a>about.asp:<script type="text/javascript">
window.onload=function(){
var s=location.search.toLowerCase();
for(var i=1;i<n;i++){
document.getElementById('index'+i).className=s=='index'+i ? 'now' : '';
}
}
</script>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test(){
for(var i=1 ,len = 3 ;i<len;i++){
document.getElementById("index"+i).className ='';
}
//var index = (document.URL).toLowerCase( ).match(/index\d+/g);
var index = "http://bbs.csdn.net/index3".toLowerCase().match(/index\d+/g);
//alert(index);
document.getElementById(index).className='now';
}
</script>
<style>
.now{color:Red;}
</style>
</head>
<body>
<a id="index1" class="now" href="about.asp">1</a>
<a id="index2" href="about.asp">1</a>
<a id="index3" href="about.asp">1</a>
<input type="button" value="test" onclick="test();" />
</body>
</html>就是这作用吧 。var i=1 。
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
if (thisURL.indexOf("index1")>0){
document.getElementById("index1").className="now";
document.getElementById("index2").className="";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
...
}if (thisURL.indexOf("index2")>0){
document.getElementById("index1").className="";
document.getElementById("index2").className="now";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
}
.
.
.
.
.
</script>
页面的连接是这样的
<a id="index1" class="now" href="a.asp">1</a>
<a id="index2" href="b.asp">2</a>
<a id="index3" href="c.asp">3</a>
之前我没写循环的时候,就可以点那个连接,就激活NOW的样式,其他没就没有NOW
我本地测试的http://localhost/rlzc
你顶楼给出了判断条件是:
thisURL = (document.URL).toLowerCase( );
[color=#FF0000]if (thisURL.indexOf("index1")>0){[/color]
这样就告诉别人,你的页面的location里会含有index1之类的参数或字符。
所以大家才踊跃的发言献策。结果你的document.URL和你的判断条件完全没有关系!呵呵你把你想实现的需求简单的再说说吧。前面给的完全不对
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
if (thisURL.indexOf("index1")>0){
document.getElementById("index1").className="now";
document.getElementById("index2").className="";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
...
}if (thisURL.indexOf("index2")>0){
document.getElementById("index1").className="";
document.getElementById("index2").className="now";
document.getElementById("index3").className="";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
....
}
if (thisURL.indexOf("index3")>0){
document.getElementById("index1").className="";
document.getElementById("index2").className="";
document.getElementById("index3").className="now";
document.getElementById("index4").className="";
document.getElementById("index5").className="";
document.getElementById("index6").className="";
document.getElementById("index7").className="";
document.getElementById("index8").className="";
....
}
.
.
.
.
</script>连接的是<a id="index1" class="now" href="a.asp">1</a>
<a id="index2" href="b.asp">2</a>
<a id="index3" href="c.asp">3</a>
<a id="index4" href="d.asp">3</a>我写的这个没有循环的JS,可以激活NOW 这个样式
例如我点A.ASP NOW样式就激活,而B.ASP,C.ASP,D.ASP就没有激活
然后我再点B.ASP,B.ASP的NOW样式就激活,而A,C,D那些都没有激活不知道我这样说清楚了没
function dean7788(o){
var obj=document.getElementsByName('index')
for(var i=0;i<obj.length;i++){//先清空所有name为index的样式
obj[i].className='';
}
o.className='now';//给你点击的A添加样式
}
</script>
<a id="index1" name="index" href="a.asp" onmousedown='dean7788(this)'>1</a>
<a id="index2" name="index" href="b.asp" onmousedown='dean7788(this)'>2</a>
<a id="index3" name="index" href="c.asp" onmousedown='dean7788(this)'>3</a>
<a id="index4" name="index" href="d.asp" onmousedown='dean7788(this)'>3</a>
不是那样的我的NOW样式改变很多的
.now{ display:block; background-color:#555353; height:37px; color:#d0ba55; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}我是要激活的效果例如1 2 3 4
红色是NOW效果,是A.ASP点击了2后,也就是B.ASP
1 2 3 4
.now{ color:#d0ba55; text-decoration:none; width:78px ;}a{float:left; display:block; background-color:#555353; height:37px; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}
</style>
<body>
<script type="text/javascript">
var oldobj;
function dean7788(o){
if (oldobj) {
oldobj.className='';
}
oldobj = o;
o.className='now';//给你点击的A添加样式
}
</script>
<a id="index1" name="index" href="#" onmousedown='dean7788(this)'>1</a>
<a id="index2" name="index" href="#" onmousedown='dean7788(this)'>2</a>
<a id="index3" name="index" href="#" onmousedown='dean7788(this)'>3</a>
<a id="index4" name="index" href="#" onmousedown='dean7788(this)'>3</a>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.now{ display:block; background-color:#555353; height:37px; color:#d0ba55; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}
</style>
<script type="text/javascript">
<!--
window.onload = function()
{
var a = document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
if(a[i].id.indexOf("index")!=-1)
{
a[i].onclick=function(){
this.className="now";
var a = document.getElementsByTagName("a");
for(var j=0;j<a.length;j++)
{
if(a[j].id.indexOf("index")!=-1&&a[j].id!=this.id)
{
a[j].className="";
}
}
};
}
}
}
//-->
</script>
</head>
<body>
<a id="index1" class="now" href="#">1</a>
<a id="index2" href="#">2</a>
<a id="index3" href="#">3</a>
<a id="index4" href="#">4</a>
</body>
</html>
NOW传递不了,是不同页面
哎呀真是辛苦大家了,我都过意不去
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.now{ display:block; background-color:#555353; height:37px; color:#d0ba55; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}
</style>
<script type="text/javascript">
<!--
window.onload = function()
{
var a = document.getElementsByTagName("a");
var id = "<%=index//这里是asp获取参数的方式,我记不清了。%>";
document.getElementById(id).className="now";
for(var i=0;i<a.length;i++)
{
if(a[i].id.indexOf("index")!=-1&&a[i].id!=id)
{
a[i].className="";
}
}
}
//-->
</script>
</head>
<body>
<a id="index1" class="now" href="a.asp?index=index1">1</a>
<a id="index2" href="b.asp?index=index2">2</a>
<a id="index3" href="c.asp?index=index3">3</a>
<a id="index4" href="d.asp?index=index4">4</a>
</body>
</html>
<a id="index1" name="index" href="a.asp" target="_blank" onmousedown='dean7788(this)'>1</a>
<a id="index2" name="index" href="b.asp" target="_blank" onmousedown='dean7788(this)'>2</a>
<a id="index3" name="index" href="c.asp" target="_blank" onmousedown='dean7788(this)'>3</a>
<a id="index4" name="index" href="d.asp" target="_blank" onmousedown='dean7788(this)'>3</a>
判断url 和 菜单href 是否匹配来设置a 标签的样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.now{ display:block; background-color:#555353; height:37px; color:#d0ba55; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}
</style>
<script type="text/javascript">
<!--
window.onload = function()
{
var menuList = document.getElementsByTagName("a");
var url = document.location.href;
var hrefUrl = '';
if(menuList==null || typeof(menuList)=='undefined')
{ return;}
var index=0;
for(;index < menuList.length;index++)
{
hrefUrl = menuList[index].href;
hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
if(hrefUrl!='' && hrefUrl != '/')
{
if(url.indexOf(hrefUrl) > 0 )
{
break;
}
}
}
if(index < menuList.length)
{
menuList[index].className="now";
}else{
menuList[0].className="now"; // 没找到匹配的,设置第一个菜单
}
//-->
</script>
</head>
<body>
<a id="index1" href="a.html">1</a>
<a id="index2" href="b.html">2</a>
<a id="index3" href="c.html">3</a>
<a id="index4" href="d.html">4</a>
</body>
</html>
a.asp
b.asp
a和b的代码
<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float:left; list-style:none}
#menu ul li .now{color:#F00}
</style>
<body>
<div id="menu">
<ul>
<li><a href="a.asp" id="a" class="now">这个就是A.ASP</a></li>
<li><a href="b.asp" id="b">这个就是b.ASP</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
thisURL = (document.URL).toLowerCase( );
if (thisURL.indexOf("a")>0){
document.getElementById("a").className="now";
document.getElementById("b").className="";
}if (thisURL.indexOf("b")>0){
document.getElementById("a").className="";
document.getElementById("b").className="now";
}
</script>
<div id="linkNodes"><!--随便加个标签,方便获取里边的链接-->
<a id="index1" class="now" href="a.asp">1</a>
<a id="index2" href="b.asp">2</a>
<a id="index3" href="c.asp">3</a>
<a id="index4" href="d.asp">3</a>
</div>window.onload=function(){
var nodes=document.getElementById("linkNodes").getElementsByTagName("a");
var url=document.location.href.toLowerCase();
for(var i=0;i<nodes.length;i++){
if(url.indexOf(nodes[i].href.toLowerCase())>=0){//注意这里的判断就可以了,目前是判断<a/>标签的href是否出现于当前浏览器地址
nodes[i].className="now";
}else{
nodes[i].className="";
}
}
}
判断url 和 菜单href 是否匹配来设置a 标签的样式逻辑是这样,这段代码没测试。不过我有项目是这样做的!逻辑是没问题的!
楼主自己根据你的逻辑修改<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
.now{ display:block; background-color:#555353; height:37px; color:#d0ba55; margin:0 0 0 2px;text-decoration:none; width:78px ; _margin:0 0 0 2px;}
</style>
<script type="text/javascript">
<!--
window.onload = function()
{
var menuList = document.getElementsByTagName("a");
var url = document.location.href;
var hrefUrl = '';
if(menuList==null || typeof(menuList)=='undefined')
{ return;}
var index=0;
for(;index < menuList.length;index++)
{
hrefUrl = menuList[index].href;
hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
if(hrefUrl!='' && hrefUrl != '/')
{
if(url.indexOf(hrefUrl) > 0 )
{
break;
}
}
}
if(index < menuList.length)
{
menuList[index].className="now";
}else{
menuList[0].className="now"; // 没找到匹配的,设置第一个菜单
}
//-->
</script>
</head>
<body>
<a id="index1" href="a.html">1</a>
<a id="index2" href="b.html">2</a>
<a id="index3" href="c.html">3</a>
<a id="index4" href="d.html">4</a>
</body>
</html>
<style>
a:link,a:visited{color:#505050; text-decoration:none;}
a:hover{color:#0072dc}
#menu{float:left; width:100px; height:18px; position:relative}
#menu ul li{float:left; list-style:none}
#menu ul li .now{color:#F00}
</style>
<body>
<div id="menu">
<ul>
<li><a href="a.asp?id=a" id="a" name="index">这个就是A.ASP</a></li>
<li><a href="b.asp?id=b" id="b" name="index">这个就是b.ASP</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var thisURL = location.search.toLowerCase();
var id=thisURL.split('=')[1];
var obj=document.getElementsByName('index')
for(var i=0;i<obj.length;i++){
obj[i].className=obj[i].id==id?'now':'';
}
}
</script>
thisURL = (document.URL).toLowerCase( );
var origin = null;
for(var i = 1; i <= 100;i++){
if(thisURL.indexOf("index" + i)>0){
if(origin) origin.className = "";
origin = document.getElementById("index" + i);
origin.className="now";
}
}
</