Question

此二级栏目导航如何实现！JS JQ CSS

审查元素和看源代码，只看到a class="on"，在来回变，没看到有JS JQ 文件代码？怎么实现的？如图：
具体去 同创集团 网站查看
hover我晓得，但是鼠标移开，hover属性会没有。所以套用了个a class="on"来调用点击后移开显示hover的属性。。。他不可能是用5个不一样的页面，每个页面栏目改个a class="on"





Answer 1

.lanmu{ width:200px; height:100%; overflow:hidden; text-align:center;position:relative; bottom:20px;}
.lanmu li{ margin-top:1px;}
.lanmu li a{ display:block; height:40px; width:200px; background:#f1f1f1; line-height:40px;}
.lanmu li a:hover{ background:#da251c; color:#fff;}
.lanmu li a.on{ background:#da251c; color:#fff;}
人家的class文件里面有个hover，就是鼠标覆盖的时候改变背景颜色，他们的class文件在head里面找找就行。

追问

这个我知道，我是要晓得，鼠标移走了。还是显示hover的效果。就是调用a class="on"

追答

因为人家有两个class，第一个项目里就用了on ，第二个没有用on，也就是默认用hover

追问

就是想知道，点第二个的时候，那个class="on"怎么跳下去？

追答

不是跳，是因为那是另外一个页面。另外一个页面的这个地方用了on的class。

追问

我是想调用JS JQ就可以实现。。不可能每个页面都将左边的导航改一次。太麻烦。

追答

function changeA(){

document.getElementById("menuA").style.background='#f00';

document.getElementById("menuB").style.background='#fff';

}

function changeB(){

document.getElementById("menuB").style.background='#f00';

document.getElementById("menuA").style.background='#fff';

}

A

B

追问

能不能按照我提供的网站 同创集团 做个JS或JQ，谢谢！

jQuery(document).ready(function($) {
$('.lanmu a').on('click', function() {
$('.lanmu a').removeClass('on')
$(this).addClass('on')
});
});

上次有个人给我这个，但是发现没用

追答

$(document).ready(function($) {
$('.lanmu a').on('click', function() {
$('.lanmu a').removeClass('on')
$(this).addClass('on')
});
});

Answer 2

这只是简单的HTMl+css，设置a:hover属性即可，表示鼠标放在上面时的样式。

追问

这个我知道，我是要晓得，鼠标移走了。还是显示hover的效果。就是调用a class="on"