Toggle Class Issue in Jquery

JavaScript
1

I’m having trouble changing the class of an item in my list using jQuery.

Can anyone help as it seems correct but wont work?

 <div id="oVideoPlayerBreadcrumbs">
                   	<ul>
                    	<li><a href="#" onclick="javascript:swapEpisode(1);return false;
" class="on" id="1">1</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(2);return false;
" class="off" id="2">2</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(3);return false;
" class="off" id="3">3</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(4);return false;
" class="off" id="4">4</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(5);return false;
" class="off" id="5">5</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(6);return false;
" class="off" id="6">6</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(7);return false;
" class="off" id="7">7</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(8);return false;
" class="off" id="8">8</a></li>
                    	<li><a href="#" onclick="javascript:swapEpisode(9);return false;
" class="off" id="9">9</a></li>
                    </ul>  
                     
                   </div>

function swapEpisode(nValue)	{
	
$('#oVideoPlayerBreadcrumbs>ul')
.find('li')
.filter('[class=on]').toggleClass('off');
$('#'+nValue)
.toggleClass('on');

}
2

Thanks that worked.

Spot on.

3

Do it something like this then:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="1012904284" />
    <title>jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("#oVideoPlayerBreadcrumbs li a").click(function(e){
            $("#oVideoPlayerBreadcrumbs li a.on").removeClass('on').addClass('off');
            $(this).removeClass('off').addClass('on');
            e.preventDefault();
       });
    });
    </script>
    <style type="text/css">
    .on{
        color: green;
    }
    .off{
        color: red;
    }
    </style>
</head>
<body>
    <div id="oVideoPlayerBreadcrumbs">
        <ul>
            <li><a href="#" class="on" id="1">1</a></li>
            <li><a href="#" class="off" id="2">2</a></li>
            <li><a href="#" class="off" id="3">3</a></li>
            <li><a href="#" class="off" id="4">4</a></li>
            <li><a href="#" class="off" id="5">5</a></li>
            <li><a href="#" class="off" id="6">6</a></li>
            <li><a href="#" class="off" id="7">7</a></li>
            <li><a href="#" class="off" id="8">8</a></li>
            <li><a href="#" class="off" id="9">9</a></li>
        </ul>
    </div>
</body>
</html>
4

would something like this work?

$(document)ready(function() {
    $('#oVideoPlayerBreadcrumbs > ul').find('li').click(function() {
      $(this).toggleClass('on');  
    });
	$('#oVideoPlayerBreadcrumbs > ul').find('li').filter('[class=on]')	{
		$(this).toggleClass('off');
});
5

Thanks but when I click on a tab I want the one that was set as default as on to be turned to off. Likewise if I click another tab it needs to be turned on and the one that was on turned off. There should only be one ‘on’ tab at a time.

Any advice?

Thanks

6

How about like this if it is really needed in <a>?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="1012904284" />
	<title>jQuery</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	   $("#oVideoPlayerBreadcrumbs li a").click(function(e){
           $(this).toggleClass('on').toggleClass('off');
           e.preventDefault();
	   });
	});
	</script>
    <style type="text/css">
    .on{
        color: green;
    }
    .off{
        color: red;
    }
    </style>
</head>
<body>
    <div id="oVideoPlayerBreadcrumbs">
        <ul>
            <li><a href="#" class="on" id="1">1</a></li>
            <li><a href="#" class="off" id="2">2</a></li>
            <li><a href="#" class="off" id="3">3</a></li>
            <li><a href="#" class="off" id="4">4</a></li>
            <li><a href="#" class="off" id="5">5</a></li>
            <li><a href="#" class="off" id="6">6</a></li>
            <li><a href="#" class="off" id="7">7</a></li>
            <li><a href="#" class="off" id="8">8</a></li>
            <li><a href="#" class="off" id="9">9</a></li>
        </ul>
    </div>
</body>
</html>
7

One of the advantages of using JQuery is to remove all inline javascript. Which helps you separate html, css, and javascript.

Upgrade to the lastest version of JQuery to always get the best benefits and performance.

Set your default css for your LIs to be “off” and then use the toggleClass method to add/remove the “on” class.


$(document)ready(function() {
    $('#oVideoPlayerBreadcrumbs > ul').find('li').click(function() {
      $(this).toggleClass('on');  
    });
});

<div id="oVideoPlayerBreadcrumbs">
    <ul>
        <li><a href="#" id="1">1</a></li>
        <li><a href="#" id="2">2</a></li>
        <li><a href="#" id="3">3</a></li>
        <li><a href="#" id="4">4</a></li>
        <li><a href="#" id="5">5</a></li>
        <li><a href="#" id="6">6</a></li>
        <li><a href="#" id="7">7</a></li>
        <li><a href="#" id="8">8</a></li>
        <li><a href="#" id="9">9</a></li>
    </ul>
</div>

Much cleaner now eh?