js更改导航条class属性

ynwll 2013-10-22 10:36:33

在头里写了段这个:

<script type="text/javascript">

// 导航菜单判断

var url = window.location.href;

var Temp = url.split("/");

var t = 0;

var File = "index,news,gallery,archives,books,about";	//对应文件

var Test = File.split(",");

var Nav = document.getElementById("nav").getElementsByTagName("li");

for(var i=0;i<Nav.length;i++){

	if(Test[i]==Temp[3]){

		t = i;

	}

	Nav[i].className = "";

}

Nav[t].className = "first";

</script>

然后在body里的导航条是这样的:

<div  id="nav">

			<ul>

				<li id="" class="first"><a href="/index.php">首页</a></li>

				<li><a href="/news.php">2</a></li>

				<li id=""><a href="/gallery.php">3</a></li>

				<li><a href="/archives.php">4</a></li>

				<li><a href="/books.php">5</a></li>

				<li><a href="/about.php">6</a></li>		

			</ul>		

		</div>

其中class="first"对应CSS,显示表示当前页有个小标志,我的想法是这样的,但是写了这段代码没有实现,麻烦高手看看给指点下,谢谢
分不多,先谢谢大家了

...全文

303 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

ynwll 2013-11-19

打赏
举报

问题解决，结贴，感谢

浴火_凤凰 2013-10-24

打赏
举报

问题都不说清楚。。。。没实现，实现后是什么效果我也不知道。。。。。。。

ziyu529 2013-10-24

打赏
举报

是不是多了这个http://，所以拆分的时候数组索引不对，你可以调试的时候或者弹出Temp[3]，看看信息变量对不对

斯洛文尼亚旅游 2013-10-23

打赏
举报

你忘记加后缀了，Temp[3]="文件名.php"


//if (Test[i] == Temp[3]) {
//==>>>>>
if (Test[i]+".php" == Temp[3]) {

ynwll 2013-10-23

打赏
举报

这样是没问题,我写了个简单的页试了下,不过为什么用var url = window.location.href;就不行了呢.我用var url = window.location.href;测试也可以正确显示当前的网址,按道理是和var url = "http://www.w3school.com.cn/books/archives.asp";一个意思的,可是为什么不能显示出当前的style呢

tony4geek 2013-10-22

打赏
举报

上面的http; 写错了<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

tony4geek 2013-10-22

打赏
举报

<!DOCTYPE html>
<html>
<head>
<script src="http;//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// 导航菜单判断
var url = "http://www.w3school.com.cn/books/archives.asp";
var Temp = url.split("/");
var t = 0;
var File = "index,news,gallery,archives,books,about";    //对应文件
var Test = File.split(",");
var Nav = document.getElementById("nav").getElementsByTagName("li");
for(var i=0;i<Nav.length;i++){
    if(Test[i]==Temp[3]){
        t = i;
    }
    Nav[i].className = "";
}
//Nav[t].className = "first";
Nav[t].style.color = "red" ; 
});
</script>
</head>
<body><div  id="nav">
            <ul>
                <li id="" class="first"><a href="/index.php">首页</a></li>
                <li><a href="/news.php">2</a></li>
                <li id=""><a href="/gallery.php">3</a></li>
                <li><a href="/archives.php">4</a></li>
                <li><a href="/books.php">5</a></li>
                <li><a href="/about.php">6</a></li>        
            </ul>        
        </div>    

</body>
</html>

tony4geek 2013-10-22