In this article I will show you how you can add remove css
class style sheet in a div control on button click using jQuery. This
article example you can use in you Asp.net as well as MVC application.
Some of my previous articles are as follows: jQuery
Tooltip With Animation Explode Effect In Asp.Net, Disable
And Enable Button Using jQuery In Asp.Net, Cookies
Create, Read and Delete Operation Using jQuery in Asp.Net, Css
Class Change of Button On Radiobutton Selection In Asp.Net Using jQuery, Shaking
Login Box Open Button Click Using jQuery In Asp.Net, Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Error Message Display Using Popup Dialog Box In Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net.
So for this article first we create a simple application and add the below jQuery library reference in the header of the page.
So for this article first we create a simple application and add the below jQuery library reference in the header of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
|
Now we will add the below code also in header of the page.
<style type="text/css">
.firstcssclass {
font-size: 15px;
width: 200px;
}
.secondcssclass {
font-weight: bold;
font-size: 20px;
width: 300px;
}
</style>
<script language="javascript">
function
AddRemoveFirstClass() {
$("#divText").removeClass("secondcssclass").addClass("firstcssclass");
}
function
AddRemoveSecondClass() {
$("#divText").removeClass("firstcssclass").addClass("secondcssclass");
}
</script>
|
In above code I have created a style sheet I will show you
how you can switch between the css class. In javascript code I have used jQuery remove and
add class function.
Now please check he completer code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery add remove
css class onclick</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<style type="text/css">
.firstcssclass {
font-size: 15px;
width: 200px;
}
.secondcssclass {
font-weight: bold;
font-size: 20px;
width: 300px;
}
</style>
<script language="javascript">
function
AddRemoveFirstClass() {
$("#divText").removeClass("secondcssclass").addClass("firstcssclass");
}
function
AddRemoveSecondClass() {
$("#divText").removeClass("firstcssclass").addClass("secondcssclass");
}
</script>
</head>
<body>
<div id="divText">
This is s
demo css class for you.
</div>
<br />
<input type="button" onclick="javascript: AddRemoveFirstClass();" value="Button
1" />
<input type="button" onclick="javascript: AddRemoveSecondClass();" value="Button
2" />
</body>
</html>
|
In above code I have taken a div control and two button
control in this I have called the javascript function on button click on the
button control.
Now we have down run the code and check the output. When we
run the code our page will look as shown below.
Now click on button 1 to get below output.
Now click on button 2 to get the output.
About the Author
0 comments:
Please let me know your view