SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ToggleClass of two (or more) objects at the same time

    Hi,

    Firstly "hello to everybody".

    Now my problem.

    I want to change class of couple objects with one click. I thought I can do it with toggleClass, but I have no idea where to start.

    My code:

    Code:
    <div class="menu" id="menu_area">
    			<a href="page1.html" class="active" id="1">page1</a><br /><br />
    			<a href="page2.html" class="inactive" id="2">page2</a><br /><br />
    			<a href="page3.html" class="inactive" id="3">page3</a><br /><br />
    			<a href="page4.html" class="inactive" id="4">page4</a><br /><br />
    		</div>
    So at the beginning the first link has class=active, when someone will click the 2nd link I want to change class of that link to "active" and rest to "inactive". And of course if someone will click on "active" link, class should stay the same (class="active). I hope I've clearly described my problem.

    Thanks in advance.

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you changing the class name to only change the way the link looks when it is clicked or to actualy disable or enable the link?

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by malin20 View Post
    So at the beginning the first link has class=active, when someone will click the 2nd link I want to change class of that link to "active" and rest to "inactive". And of course if someone will click on "active" link, class should stay the same (class="active).
    The best technique to achieve this is to perform two separate steps:

    1. Set all of those links to inactive
    2. Add the active class to the one appropriate link
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    are you changing the class name to only change the way the link looks when it is clicked or to actualy disable or enable the link?
    I'm trying to change the way the link looks by changing the class, but clicking the link does not load new page, it loads new content to a div form a static page.

    Quote Originally Posted by pmw57
    The best technique to achieve this is to perform two separate steps:
    Set all of those links to inactive
    Add the active class to the one appropriate link
    Ok, so what you are saying is : make a active link by adding another class (active link made from two classes), class="class1 class2"?

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but as soon as a link is clicked, the browser will go to a new page as specified in the link's href, so I don't see why you need to change how the link looks since you'll be taken to another page.

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but something like this is probably what you need


    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
     
    .normal {
     color: green
    }
     
    .active {
     color: red
    }
     
    </style>
    <script  type="text/javascript">
     
    function setDefClass() {
     for(i=0; i < lnksO.length; i++) {
            lnksO[i].className = 'normal';  
        }
    }
     
    window.onload=function() {
        lnksO = document.getElementById("menu_area").getElementsByTagName("a");
        //set the default class to these links
        setDefClass();
        //set the onclick event handler
        for(i=0; i < lnksO.length; i++) {
            lnksO[i].onclick = function () {
                setDefClass();
                this.className = 'active';
            }
        }
    }
    </script>
     
    </head>
    <body>
     
    <div class="menu" id="menu_area">
       <a href="#" class="active" id="1">page1</a><br /><br />
       <a href="#" class="inactive" id="2">page2</a><br /><br />
       <a href="#" class="inactive" id="3">page3</a><br /><br />
       <a href="#" class="inactive" id="4">page4</a><br /><br />
    </div>
     
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    but as soon as a link is clicked, the browser will go to a new page as specified in the link's href, so I don't see why you need to change how the link looks since you'll be taken to another page.
    That's the problem... clicking a link will NOT take you to a new page, cause clicking will launch javascript which will change the content of a div and then return false, so the browser will not go to a new page.

    Thx for a script, will check it later.

    Update:

    And the winner is: Kalon Thank you very much, this is what I was looking for.


Tags for this Thread

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
  •