Question

我有以下HTML页面：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settings</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/settings.css">
    <link rel="stylesheet" href="css/buttons.css">
    <script src="scripts/utils.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var language = localStorage.getItem("idioma");
            $(language).removeClass("shiny-btn").addClass("shiny-btn clicked");
       });
    </script>
</head>

<body>
    <div id="settingsPanel">Settings</div>
    <a id="spanish" class="shiny-btn" onclick="setLanguage('spanish');">Spanish</a>
    <a id="catalan" class="shiny-btn" onclick="setLanguage('catalan');">Catalan</a>
</body>

</html>

这是buttons.css文件：

.shiny-btn {
    cursor: pointer;
    text-align:center;
    width: 15em;
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999; 
    box-shadow: 2px 2px 2px #bbb;
    background-color: #ce401c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

.shiny-btn.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

我确定我在var language中有一个值。

但是当我这样做时：$(language).removeClass("shiny-btn").addClass("shiny-btn clicked");没有任何改变。

你知道为什么吗？

Answer 1

首先你改变 CSS （不是必需的）

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

然后尝试使用此

$('a').live ('click hover mouseover', function() {
    var lang = $(this).id;
    $('#'+lang).addClass("clicked");
 },
   function() {  
    $(this).removeClass("clicked");
});

明确提到 here ：

重要的是要注意这一点方法不替换类。它只需添加该类，将其附加到任何可能已被分配的东西元素。

Answer 2

只使用$（语言）.addClass（“点击”）

Answer 3

.shiny-btn.clicked { ... }

这代表2个类，shiny-btn和clicked因此，您需要

<html_element class="shiny-btn">
    <html_element class="clicked"> ... </html_element>
</html_element>

你可能想要的是继承所有以前的类并使用类clicked覆盖

.shiny-btn {        
    /* default properties */
}

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

.selected {
    /* add here your selected style */
 }

然后，只需使用：

// make a fancy hover on buttons
$(".shiny-btn").hover( 
    function() {  // on mouseover
        $(this).addClass("clicked");
    }, 
    function() {  // on mouseout
        $(this).removeClass("clicked");
    });

// add .selected class to the correct language
$("#" + language).addClass("selected");

Answer 4

据我了解，您只需要添加'clicked'类。 jQuery应该很好地处理它：

$("#"+language).addClass("clicked");

编辑：正如diEcho指出的那样，语言显然是一个字符串。因此需要ID选择器。

无法使用jquery更改css类

4 个答案: