Using JQuery to toggle between styles
Good afternoon,
I am searching for a way to Toggle between styles:
Example:
I have two styles(classes), one makes the paragraph red and the other makes the paragraph blue. I only want to use JQuery to call the style开发者_JAVA技巧s, not to hold the styles itself.
So when I click a button, the paragraph turns red, when I click again, it turns blue.
Again, I would rather have the style separate and given class names and have JQuery switch between the two.
I have search the net but keep coming up with show/hide examples where the styles are embedded into the JQuery function.
Any ideas will be appreciated!
Overmars
Hello everyone! This is what I did, as I mentioned I was simply trying to toggle between two styles. One styles does something, example: Make a text red or change an image and the other style makes another thing happened.
Thanks every one for your time a patience. You all do make a difference.
I found the answer in my JQuery Cook Book. Chapter 3. Event Handling Page 69. Here is the code:
$(document).ready(function() {
$('.normalStyle').click(function(){
$(this).toggleClass('newStyle');
});
});
use toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
$('div.foo').toggleClass(function() {
if ($(this).is('.blue')) {
return 'red';
} else {
return 'blue';
}
});
This example will toggle the blue class for <div class="foo"> elements if their parent element is of class red; otherwise, it will toggle the blue class.
or even shorter:
$('div.blue').toggleClass('red');
a toggled class outrules the initial color, (red class is just added) as used in:
$('div.blue').click(function() {
$(this).toggleClass('red');
});
fiddle here
or with really pure class replacement (the blue is removed and the red is added and vv):
$('div').click(function() {
$(this).toggleClass('red blue')
});
fiddle here
You can use .toggleClass() to toggle on and off your class to change your text color.
$("#someButton").click(function(){
$("#someP").toggleClass("makeRed");
});
Simple example on jsfiddle
Look at this post pls. jquery background from image to color and back again
i hope it will help :-)
it is basicly the same as what I understand you are looking for.
In stead of changing between an image and a colour, you can make the styles red/blue.
I think you need something like:
Styleswitch stylesheet switcher built on jQuery http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/
Try this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.aParagraph
{
width:700px;
font-family:Verdana;
font-size:15pt;
border: 3px inset green;
}
.blueParagraph
{
color:Blue;
}
.redParagraph
{
color:Red;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
function colorRed() {
var P = $("#theParagraph");
P.removeClass("blueParagraph");
P.addClass("redParagraph");
}
function colorBlue() {
var P = $("#theParagraph");
P.removeClass("redParagraph");
P.addClass("blueParagraph");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="makeRed" onclick="colorRed();" value="Turn Red" />
<input type="button" id="makeBlue" onclick="colorBlue();" value="Turn Blue" />
<div id="theParagraph" class="aParagraph redParagraph">
Good afternoon,
I am searching for a way to Toggle between styles:
Example:
I have two styles(classes), one makes the paragraph red and the other makes the paragraph blue. I only want to use JQuery to call the styles, not to hold the styles itself.
So when I click a button, the paragraph turns red, when I click again, it turns blue.
Again, I would rather have the style separate and given class names and have JQuery switch between the two.
I have search the net but keep coming up with show/hide examples where the styles are embedded into the JQuery function.
Any ideas will be appreciated!
</div>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论