Results 1 to 7 of 7

Thread: Change background color of selected item in list

  1. #1

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Change background color of selected item in list

    How can I change background color in selected item in list with javascript?
    Here is code I got:
    HTML Code:
    1. <html>
    2. <title>Testing</title>
    3. <style type="text/css">
    4. body {
    5. background-color:black;
    6. }
    7. #navigation ul{ width: 150px; }
    8. #navigation ul li {
    9.   list-style: none;
    10.   background-color: transparent;
    11.   border-top: none;
    12.   text-align: left;
    13.   margin: 0;
    14.  }
    15. #navigation ul li a {
    16.   display: block;
    17.   text-decoration: none;
    18.   color:white;
    19.   padding: .25em;
    20.   border-bottom: none;
    21.   border-right: none;
    22.  }
    23.  #navigation ul li:hover {
    24.  background-color:lightblue;
    25.  }
    26. </style>
    27. <head>
    28. <script type="text/javascript">
    29.  
    30. </script>
    31. </head>
    32. <body>
    33. <div id ="navigation">
    34. <ul>
    35. <li><a href="#">Home</a></li>
    36. <li><a href="#">FAQ</a></li>
    37. <li><a href="#">Gallery</a></li>
    38. <li><a href="#">About Us</a></li>
    39. </ul>
    40. </div>
    41. </body>
    42. </html>

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Change background color of selected item in list

    Use a:hover to change the color of the anchor.

    Check this example that I have made for you: http://jsfiddle.net/DNmGt/

    HTML
    html Code:
    1. <ul>
    2.     <li><a href="#">Menu 1</a></li>
    3.     <li><a href="#">Menu 2</a></li>
    4.     <li><a href="#">Menu 3</a></li>
    5. </ul>
    CSS
    css Code:
    1. ul{list-style: none;}
    2. li{float: left; width: 75px;}
    3. li a{text-decoration:none; }
    4. li a:hover{background-color: #c2c2c2;}

    If you really want it the other side, you could use the following jQuery code:
    Code:
    $('#nav li').hover(function(){
        $(this).css('background-color', '#c2c2c2');
        }, function(){
            $(this).css('background-color', 'transparent');
    });​
    HTML
    html Code:
    1. <ul id="nav">
    2.     <li><a href="#">Menu 1</a></li>
    3.     <li><a href="#">Menu 2</a></li>
    4.     <li><a href="#">Menu 3</a></li>
    5. </ul>​
    CSS
    css Code:
    1. ul{list-style: none;}
    2. li{float: left; width: 75px; text-align: center;}
    3. li a{text-decoration:none; }
    See it in action: http://jsfiddle.net/w3BAF/


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  3. #3

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Change background color of selected item in list

    You didnt understood me quite well but this is ok If I need hover but I need to make background-color forever active depending which list item was clicked and as soon other is clicked the last will be transparent and enw one will ged background-color. But still +1 for your work.

  4. #4
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Change background color of selected item in list

    Quote Originally Posted by Mr.Joker View Post
    You didnt understood me quite well but this is ok If I need hover but I need to make background-color forever active depending which list item was clicked and as soon other is clicked the last will be transparent and enw one will ged background-color. But still +1 for your work.
    Oops! Now a days my brain is a bit slow. And my eyes doesn't catches the real question.

    There is an addClass() in jQuery. Check the examples in it: http://api.jquery.com/addClass/

    Write a CSS class that will set the background-color. And attach the click event for the li, to call the addClass() passing the class name as parameter.


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  5. #5

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Change background color of selected item in list

    I tryed but cant do it, its because I dont know Jquery

  6. #6
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Change background color of selected item in list

    Ok. I have made an example for you: http://jsfiddle.net/GNmfp/

    Try clicking those different menus in that fiddle, to see the effect.


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  7. #7

    Thread Starter
    Addicted Member Mr.Joker's Avatar
    Join Date
    Apr 2012
    Posts
    140

    Re: Change background color of selected item in list

    Thank you so much

Posting Permissions

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



Click Here to Expand Forum to Full Width