• No categories

Add a class to html in jquery

here i am going to show you how we can add a class of css to html elements like a,p,h3 etc. You can see demo by copy Below given code and paste in text editor and save as html file and open in a web browser. you can download latest version of jquery from here [download jquery]-
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Attach Class Jquery</title>
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-family:Georgia, “Times New Roman”, Times, serif;
font-family:”Times New Roman”, Times, serif;
<script src=”jquery-1.4.2.js” language=”javascript” type=”text/javascript”></script>

$(“#nav ul li”).addClass(‘hlists’);
<!– wrap starts here –>
<div id=”wrap”>
<!–header –>
<div id=”header”>
<h1><a href=”http://www.amandip.com/” title=””>Aman Dhaliwal</a></h1>
<p>Everyday Is A Gift That’s Why It Is Called The Present</p>
<a href=”http://www.amandip.com/”>Home</a> |
<a href=”http://www.amandip.com/contact”>Contact</a> |
<a href=”http://www.amandip.com/sitemap”>Site Map</a>
<!–header ends–>
<!– navigation starts–>
<div id=”nav”>
<li id=”current”><a href=”http://www.amandip.com/”>Home</a></li>
<li><a href=”http://www.amandip.com/projects”>Projects</a></li>
<li><a href=”http://www.amandip.com/codesamples”>Code Samples</a></li>
<li><a href=”http://www.amandip.com/about”>About Me</a></li>
<li><a href=”http://www.amandip.com/contact”>Contact Me</a></li>
<!– navigation ends–>
<!– content-wrap starts –>
<div id=”content-wrap”>
<div id=”main”>
<h2><a href=”http://www.amandip.com/”>Welcome</a></h2>
<p>Welcome to my personal website…</p>
<p>Within you will find my recent and past web design projects, as well as my online resume and contact information.</p>
<p>Personal Info</p>
<p>Growing up online, I became fascinated with almost everything digital. I consider myself a self-taught web designer and an avid web coder. Designing websites has been a long passion of mine. To get in touch with me, please use contact form. You can also view my e-mail address and contact information.</p>

<!– main ends –>
<div id=”sidebar”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”#”>Java</a></li>
<li><a href=”#”>C</a></li>
<li><a href=”#”>C++</a></li>
<li><a href=”#”>PHP/MySQL</a></li>
<h3>Wise Words</h3>
<p>”Trials teach us what we are; they dig up the soil,
and let us see what we are made of.” </p>
<p>- Charles Haddon Spurgeon</p>
<!– sidebar ends –>
</div><!– content-wrap ends–>
</div><!– footer starts –>
<div id=”footer-wrap”>
<div id=”footer-columns”>
<h3>My Websites</h3>
<li><a href=”http://amandip.brinkster.net/”>http://amandip.brinkster.net/</a></li>
<li><a href=”http://amandip.web.officelive.com”>http://amandip.web.officelive.com</a></li>
<li><a href=”http://aman.coolpage.biz/”>http://aman.coolpage.biz/</a></li>
<li><a href=”http://amandhaliwalzblog.blogspot.com/”>http://amandhaliwalzblog.blogspot.com/</a></li>
<li><a href=”http://sites.google.com/site/amandipclub”>http://sites.google.com/site/amandipclub</a></li>
<h3>My Projects</h3>
<li><a href=”http://www.vancouver-seo.net/”>Vancouver SEO</a></li>
<li><a href=”http://www.indiaseocompany.net/”>India SEO</a></li>
<li><a href=”http://www.princessweddingphotography.ca”>Princess Wedding Photography</a></li>
<li><a href=”http://www.thetechnocare.com/”>Technocare Nursery</a></li>
<li><a href=”http://www.cyberstarinfotech.com/index1.php”>Cyberstar Infotech</a></li>
<!– footer-columns ends –>
<!– footer ends–>
<!– wrap ends here –>

About the Author:

Comments are closed.