jquery changing class on click

Question

This simple code should change the class of the body element. But it doesn't work!

May the problem be in the wrong jQuery version link?

Besides, pretty strange, but in http://jsfiddle.net/4Bfa7/1/ it seems to work!

<!doctype html>
<html lang="en">

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<script type="text/javascript">    
    $("li.work").click(function(){
        $('body').removeClass();
        $('body').addClass("work");
});

$("li.pret").click(function(){
        $('body').removeClass();
        $('body').addClass("pret");
});

$("li.port").click(function(){
        $('body').removeClass();
        $('body').addClass("port");
});

$("li.contact").click(function(){
        $('body').removeClass();
        $('body').addClass("contact");
});
</script>    
<style>
body.contact{
background-color: red;}
</style>
</head>    
<body class="front">
<div id=" container">
<header>

<h1 id="site-name"><a href="/"> Crearea web site</a></h1>
<nav>

<ul class="main-nav">

<li class="careers"><a href="/ro" onclick><span class="menu-item-title"> HOME</span></a>
</li>
    <li class="work"><a href="/ro/about"><span class="menu-item-title"> About</span></a>
</li>
<li class="pret"><a href="/ro/preti"><span class="menu-item-title"> Pretul</span></a>
</li>

<li class="port"><a href="/ro/portfolio"><span class="menu-item-title"> Portofoliu</span></a>
</li>
<li class="contact"><a href="#"><span class="menu-item-title"> Contacte</span></a>
</li>

</ul>
</nav>
</header>
</body>
</html>

It seems you are missing document ready handler.

Ram
– Ram

2013-09-08 16:12:21 +00:00
Commented Sep 8, 2013 at 16:12 — Ram
– Ram, Commented Sep 8, 2013 at 16:12

user490524 · Accepted Answer · 2013-09-08 16:13:23Z

2

Try it this way:

$( document ).ready( function() {
  /* your event handlers */
});

The scripts in your code get executed before the DOM elements exist, so there isn't anything to bind on. $( document ).ready() gets executed when the DOM is fully loaded.

answered Sep 8, 2013 at 16:13

user490524

Sign up to request clarification or add additional context in comments.

Comments

Dipesh Parmar · Accepted Answer · 2013-09-08 16:13:33Z

0

wrap your code inside document.ready.

$(function(){
   //
});

answered Sep 8, 2013 at 16:13

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

doktorgradus · Accepted Answer · 2013-09-08 16:19:19Z

0

Wrap code into $( document ).ready(); or place code at bottom of document directly before tag </body> or put the code in a separate file. This file will be load after loading document.

answered Sep 8, 2013 at 16:19

doktorgradus

6271 gold badge5 silver badges13 bronze badges

Comments

Mateusz Mania · Accepted Answer · 2013-09-08 16:37:21Z

0

Try removeAttr when document is loaded. RemoveAttr method additional remove attribute from Your code, removeClass only clean class attribute value.

$(document).ready(function (){  

    $("li.work").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("work");
    });

    $("li.pret").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("pret");
    });

    $("li.port").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("port");
    });

    $("li.contact").click(function(){
            $('body').removeAttr('class');
            $('body').addClass("contact");
    });
});

answered Sep 8, 2013 at 16:37

Mateusz Mania

8494 silver badges15 bronze badges

Collectives™ on Stack Overflow

jquery changing class on click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related