css做的导航条,如何保留点击后的状态

html-css018

css做的导航条,如何保留点击后的状态,第1张

你这个是导航条、用js实现这个效果没有意义的、因为你点击之后页面就跳转了。

还是设置css比较合理。

假设一个链接表

A ->A.HTM

B ->B.HTM

C ->C.HTM

样式表里面设置 a.current{font-weight:bold}

在A页

<a href="A.HTM" calss="current">A</a>

<a href="B.HTM">B</a>

<a href="C.HTM">C</a>

在B页

<a href="A.HTM">A</a>

<a href="B.HTM" calss="current">B</a>

<a href="C.HTM">C</a>

在C页

<a href="A.HTM">A</a>

<a href="B.HTM">B</a>

<a href="C.HTM" calss="current">C</a>

这个很简单,用js才能实现,css样式我就不说了,左侧是a链接,右侧是div,

关键是js,在每个点击里添加onclick事件,事件触发opens函数,函数通过参数判断要打开哪个div,其余的再隐藏,给个例子你,很简单的东西,我随便写的,没有测试过,你自己研究研究:

<a href="#" onclick="opens(1)">1</a>

<a href="#" onclick="opens(2)">1</a>

<a href="#" onclick="opens(3)">1</a>

<div id="dis1">111</div>

<div id="dis2" style="display:none">222</div>

<div id="dis3" style="display:none">333</div>

<script>

function opens(obj){

for(var i = 1i<=3i++){

if(i == obj){document.getElementById("dis"+i).style.display="block"

}else

document.getElementById("dis"+i).style.display="none"

}

}

</script>

淘宝店铺导航栏点击之后是蓝色,是可以改颜色的,你先进入到淘宝的装修中,然后点击到导航条的那一部分,在点击自定义代码,找到a标签的css代码,看到color属性,在那个后面添加需要的颜色就可以了,具体通过代码来理解下:

<html>

<head>

<style>

.keepbj{ //通过class来设置

width:100px

height:50px

border:1px solid #f00

}

.keepbj a{

color:#f00 //这个是红色,可以根据需要来填写就行。

}

</style>

</head>

<body>

<div class='keepbj'>

<a href=''>目录1</a>

</div>

</body>

</html>