SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onclick link change text color

    Dear All,
    I have a page here http://183.78.169.54/tree/2.html. What I want to control is that for link on the left that is clicked I want the text to change to a particular color to highlighted it have been selected. And when another linked is clicked I want the previous linked to be reset to the normal color. How to achieve that.

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would recommend setting a class name for the link you clicked.
    Code JavaScript:
    // Get all the links
    var links = document.getElementById('sitemap').getElementsByTagName('a');
     
    // Set a highlighted link
    function highlightCurrent(link) {
        link.className = 'current';
    }
     
    // Remove all highlighted links (remove class names)
    function removeHighlights() {
        for (var i = 0, l = links.length; i < l; i += 1)  {
            links[i].className = '';
        }
    }
     
    // Add click events
    for (var i = 0, l = links.length; i < l; i += 1) {
        links[i].onclick = function(){
            removeHighlights();
            highlightCurrent(this);
        }
    }

    You could simplify this even further if you were to use a bit of jQuery (this handles the click binding and also any existing classes you are using for styling, whereas the native js above does not):

    Code JavaScript:
    var $links = $('#sitemap a');
    $links.click(function(){
        $links.removeClass('current');
        $(this).addClass('current');
    });

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Anthony,
    I am not that familiar with jquery yet always get stuck. Anyway I dont get you when you said (this handles the click binding and also any existing classes you are using for styling, whereas the native js above does not)?

  4. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clicking is an event that the browser will tell javascript has happened when the user clicks the mouse. You can "bind" javascript to run when the user clicks on certain elements in your page, jQuery just handles this in a very neat cross browser way.

    HTML and CSS support having multiple class names on elements. You don't have that occuring in your code currently, but if it did then jQuery helps by providing functions to add and remove individual classes. The first example code I had does not do that.

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Anthony,
    Below is my full codes with the codes you suggested well is running well now. So do you want me to change it to jQuery is it because I still cant see the advantage that I will get from jQuery. In addition to that can I also have a different background color on the selected link?

    this.sitemapstyler = function(){
    var sitemap = document.getElementById("sitemap")
    if(sitemap){

    this.listItem = function(li){
    if(li.getElementsByTagName("ul").length > 0){
    var ul = li.getElementsByTagName("ul")[0];
    //alert("NAme is :"+ul.id);

    ul.style.display = "none";
    var span = document.createElement("span");
    span.className = "collapsed";
    span.onclick = function(){
    //alert("Clicked");
    var form1= document.getElementById('form1');
    var uls = form1.getElementsByTagName("ul");
    var spans = form1.getElementsByTagName("span");
    for (var i = 1; i < uls.length; i++)
    {
    if(uls[i].id==ul.id)
    {
    //alert("UL ID : "+uls[i].id+" "+ul.id+"SAME");
    }
    else
    {
    uls[i].style.display = "none";
    }
    //
    //uls[i].className = "expanded";
    }
    for (var j = 0; j < spans.length; j++)
    {
    spans[j].className = "collapsed";
    }
    //alert("ul.style.display :"+ul.style.display );
    ul.style.display = (ul.style.display == "none") ? "block" : "none";
    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
    };
    li.appendChild(span);
    };
    };

    var items = sitemap.getElementsByTagName("li");
    for(var i=0;i<items.length;i++){
    //alert("I :"+i+"LEngth :"+items.length);
    listItem(items[i]);
    };


    var links = document.getElementById('sitemap').getElementsByTagName('a');

    // Set a highlighted link
    function highlightCurrent(link) {
    link.className = 'current';
    }

    // Remove all highlighted links (remove class names)
    function removeHighlights() {
    for (var i = 0, l = links.length; i < l; i += 1) {
    links[i].className = '';
    }
    }

    // Add click events
    for (var i = 0, l = links.length; i < l; i += 1) {
    links[i].onclick = function(){
    alert("ATR");
    removeHighlights();
    highlightCurrent(this);
    }
    }


    };
    };

    window.onload = sitemapstyler;


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
  •