1.被点击时的效果可以用div:active{
css
}
2.鼠标覆盖在上面的时候可以用div:hover{
css}
3.点击之后的效果,这个相对前2种有些麻烦,必须用到JS或者jquery,步骤如下:
a.先给div添加一个选中的样式比如on{css};
b.然后在js中$('div').click(function{
$('div').toggleClass('
','on')
})
这是jquery自带的一个方法,点击div切换2个class,
我这个只是实现你说的正在访问的文字有不同于其他文字的效果用一个简单的js就可以
js里:
function xk(n){
for(var i=1i<=6i++){
var curB=document.getElementById("nav"+i)
if(n==i){
curB.className="active"
}else{
curB.className="none"
}
}
}
css里:加一个选中后的样式
.active{} /*he js里的curB.className="active"名称对应*/
菜单:
<ul>
<li onclick="return xk(1)" id="nav1" class="none"><a href="/">11111</a></li>
<li onclick="return xk(2)" id="nav2" class="none"><a href="/">22222</a></li>
<li onclick="return xk(3)" id="nav3" class="none"><a href="/">33333</a></li>
<li onclick="return xk(4)" id="nav4" class="none"><a href="/">44444</a></li>
<li onclick="return xk(5)" id="nav5" class="none"><a href="/">55555</a></li>
<li onclick="return xk(6)" id="nav6" class="none"><a href="/">66666</a></li>
</ul>
虽然代码可能有点麻烦 但是可以实现