Home/ Questions/Q 5950597
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T17:24:58+00:00

I have the following HTML page: <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Settings</title> <link

  • 0

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;
    -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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0