SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle Class Issue in Jquery

    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?

    HTML Code:
     <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>
    Code JavaScript:
    function swapEpisode(nValue)	{
     
    $('#oVideoPlayerBreadcrumbs>ul')
    .find('li')
    .filter('[class=on]').toggleClass('off');
    $('#'+nValue)
    .toggleClass('on');
     
    }

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2010
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    $(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?

  3. #3
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about like this if it is really needed in <a>?
    Code html4strict:
    <!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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would something like this work?

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

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do it something like this then:
    Code html4strict:
    <!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>
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that worked.

    Spot on.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •