Can't change css class using jquery
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.
$(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:
$("#"+language).addClass("clicked");
Edit: As diEcho pointed out, language is apparently a string. So an ID selector is required.
加载中,请稍侯......
精彩评论