Quick Reach
HTML Classes
In your web projects, the presentation layer or HTML may contain classes. For example in DIV, or paragraphs, links and others may use classes to format HTML elements. E.g.
<div class=”myDivclass”>
<p class=”myPclass”>
<a class=”myAclass”>
In order to perform actions on these elements on the basis of class attribute, jquery provides Class selector. The syntax is as follows:
Syntax of jQuery class name selector
$(“.class”);
Example
Selecting elements by class names requires calling by ‘.’ (period) followed by class name of the element. The jquery selector will search for given class in document and perform given action.
$(“myDivclass”).show;
$(“myPclass”).hide;
Example of Selector by .Class name
The example below is the basic but it explains proper class formatting and then using it in jquery element selector. Internal CSS is used to create classes placed in<head> section. Normally you might use external CSS.
When Green Text is clicked it will show only green text and hide red and orange <p>, when red text is clicked then only red will display while orange and green will be hidden by using jquery hide() method. Save below code in jquerytest.html file or whatever and run it in browser. Note that jquery library is included from Google CDN, so you don’t need to download and refer its physical path.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
<html>
<head>
<style type=”text/css”>
/*Menu number 1*/
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exPgreenclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: green;
}
.exPredclass {
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: red;
}
.exPorangeclass{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: orange;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“#link1”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).show();
});
$(“#link2”).click(function () {
$(“.exPredclass”).show();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).hide();
});
$(“#link3”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).show();
$(“.exPgreenclass”).hide();
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” title=“Green Text” href=“#”>Green Text</a>
<a class=“linkclass” id=“link2” title=“Red Text” href=“#”>Red Text</a>
<a class=“linkclass” id=“link3” title=“Orange Text” href=“#”>Orange Text</a>
</div>
<p class=“exPgreenclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPredclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPorangeclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
</body>
</html>
|
Also see: jquery removeclass() method
Leave A Comment?