jquery css改变不起作用

时间:2014-08-27 12:52:00

标签: jquery html css

我试图用jquery click事件更改一个类,以便以不同于其他元素的方式显示一个元素。我有一个函数来更改一个类和一个函数来检查选择了哪个项目并更改了它的css,但它根本不起作用。

HTML

<div id="menu">
    <ul id="ul1" class="main_menu current-s1">
    <li class="s1"><a class="hov" id="start" href="#" title="Start">START<span></span></a></li>
    <li class="s2"><a class="hov" id="go" href="#" title="Go">GO<span></span></a></li>
    </ul>        
</div>

更改课程 JQUERY 功能:

$(".hov").click(function(){
    var cls = $(this).parent("li").attr("class");
    var class1 = "current-"+cls;
    var current = $('#ul1').attr('class').split(' ');
    if(class1 != current[1]) {
    $("#ul1").addClass(class1).removeClass(current[1]);
    }
});

检查当前元素以不同方式显示 JQUERY 功能

$(".main_menu").children("li").each(function() {
var current = "main_menu current-" + ($(this).attr("class"));
var parentClass = $(".main_menu").attr("class");
if (parentClass == current) {
    $(this).children("a").addClass("hov_n");
    $(this).children("a").removeClass("hov");
}
}); 

我尝试了一些警报,似乎类更改功能正在运行,但不知何故,其他功能不会将显示模式更改为其他按钮。任何提示都会受到欢迎! 编辑 FIDDLE http://jsfiddle.net/vrt15/4tbbksxL/

此致

2 个答案:

答案 0 :(得分:0)

瓦哈,你做得很努力,试试这个

HTML

<div id="menu">
    <ul id="ul1" class="main_menu">
    <li class="s1"><a class="hov_n" id="start" href="#" title="Start">START<span></span></a></li>
    <li class="s2"><a class="hov" id="go" href="#" title="Go">GO<span></span></a></li>
    </ul>        
</div>

JS

function setClick() {

$(".hov").unbind("click");
$(".hov").click(function(){
   $('.hov_n').eq(0).removeClass("hov_n").addClass("hov");
   $(this).addClass("hov_n").removeClass("hov");
   setClick();
});

}

setClick();

答案 1 :(得分:0)

使用简单的功能,您可以获得相同的效果:

$("#menu a").click(
    function(){
        var parent = $('#menu')
        $("a", parent).removeClass("hov_n");
        $("a", parent).addClass("hov");

        $(this).removeClass("hov");
        $(this).addClass("hov_n");
    });

http://jsfiddle.net/4tbbksxL/4/