Can't change css class using jquery_问答_开发者

开发者 https://www.devze.com 2023-03-08 23:03 出处：网络

I have the following HTML page: <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

相关专题：css javascript

I have the following HTML page:

<!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>

And this is buttons.css file:

.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;
  开发者_JAVA技巧  -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;
}

I'm sure I have a value in var language.

But when I do this: $(language).removeClass("shiny-btn").addClass("shiny-btn clicked"); nothing changes.

Do you know why?

first u change in CSS ( not necessary )

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

then try with this

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

see here clearly mentioned:

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

use just $(language).addClass("clicked")

.shiny-btn.clicked { ... }

this represents 2 classes, shiny-btn and clicked so, you will need to have

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

what you probably want is to inherit all the previous class and override with the class 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 */
 }

and then, just use:

// 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");

As far as I understand you only need to add the 'clicked' class. jQuery should handle it well: