How to dynamically change the color of the selected menu item of a web page

Question

I am new to developing web pages  I am looking to create menus similar to the ones in stackoverflow com  like Questions  Tags  Users shown above   How do I change the color of the selected menu  for example  the background color of the Question changes to orange when  clicked      I have managed to change the color while hovering  using CSS  as that was simple  but I am having trouble with this   Can I achieve this effect of changing the color of a clicked item using only CSS

User · Answer

It would probably be easiest to implement this using JavaScript     Here s a JQuery script to demo     As the others mentioned     we have a class named  active  to indicate the active tab - NOT the pseudo-class   active   We could have just as easily named it anything though     selected  current  etc   etc       CSS      nav   width 480px margin 1em auto     nav ul  margin 1em auto  padding 0  font 1em  Arial Black  sans-serif      nav ul li display inline      nav ul li a text-decoration none  margin 0  padding  25em 25px  background  666  color  ffffff      nav ul li a hover background  ff9900  color  ffffff      nav ul li a active  background  ff9900  color  ffffff        JQuery Example      lt script type  text javascript  gt    function              nav ul li a   each function            var path   window location href          var current   path substring path lastIndexOf      1           var url     this  attr  href             if url    current                 this  addClass  active                                      lt  script gt       HTML      lt div id  nav   gt       lt ul gt           lt li gt  lt a href  index php 1  gt One lt  a gt  lt  li gt           lt li gt  lt a href  index php 2  gt Two lt  a gt  lt  li gt           lt li gt  lt a href  index php 3  gt Three lt  a gt  lt  li gt           lt li gt  lt a href  index php 4  gt Four lt  a gt  lt  li gt       lt  ul gt   lt  div gt

User · Answer

Assuming you want to change the colour of the currently selected link tab    you re best bet is to apply a class  say active  to the currently selected link tab and then style this differently   Example style could be   li active  a active     background-color   f90

User · Answer

I m late to this question  but it s really super easy  You just define multiple tab classes in your css file  and then load the required tab as your class in the php file while creating the LI tag    Here s an example of doing it entirely on the server   CSS  html ul tabs li activeTab1  html ul tabs li activeTab1 a hover  html ul tabs li activeTab1 a         background   0076B5      color  white      border-bottom  1px solid  0076B5     html ul tabs li activeTab2  html ul tabs li activeTab2 a hover  html ul tabs li activeTab2 a       background   008C5D      color  white      border-bottom  1px solid  008C5D      PHP   lt ul class  tabs  gt       lt li  lt  php print  class  activeTab1     gt  gt           lt a href   lt  php print  Tab1 php    gt   gt Tab 1 lt  a gt       lt  li gt        lt li  lt  php print  class  activeTab2     gt  gt           lt a href   lt  php print  Tab2 php    gt   gt Tab 2 lt  a gt       lt  li gt   lt  ul gt

User · Answer

Try this  It holds the color until another item is clicked     lt style type  text css  gt    activeElem   background-color lightblue           desactiveElem   background-color none               lt  style gt    lt script type  text javascript  gt  var activeElemId  function activateItem elemId     document getElementById elemId  className  activeElem    if null  activeElemId       document getElementById activeElemId  className  desactiveElem       activeElemId elemId      lt  script gt    lt li id  aaa  gt  lt a href     onclick  javascript activateItem  aaa     gt AAA lt  a gt   lt li id  bbb  gt  lt a href     onClick  javascript activateItem  bbb     gt BBB lt  a gt   lt li id  ccc  gt  lt a href     onClick  javascript activateItem  ccc     gt CCC lt  a gt

User · Answer

There is a pure CSS solution I m currently using   Add a body ID  or class  identifying your pages and your menu items  then use something like   HTML    lt html gt       lt body id  body questions  gt           lt ul class  menu  gt               lt li id  questions  gt Question lt  li gt               lt li id  tags  gt Tags lt  li gt               lt li id  users  gt Users lt  li gt           lt  ul gt                   lt  body gt   lt  html gt    CSS    menu li hover   body questions  questions   body tags       tags   body users      users       background-color   f90

User · Answer

At last I managed to achieve what I intended with all your help and the post Change a link style onclick  Here is the code for that  I used JavaScript for doing this    lt html gt       lt head gt           lt style type  text css  gt               item                   width 900px                  padding 0                  margin 0                  list-style-type none                             a                   display block                  width 60                  line-height 25px    24px                   border-bottom 1px  none  808080                  font-family  arial narrow  sans-serif                  color  00F                  text-align center                  text-decoration none                  background  CCC                  border-radius  5px                  -webkit-border-radius  5px                  -moz-border-radius  5px                  margin-bottom 0em                  padding  0px                             a item                   float left            For horizontal left to right display                     width 145px           For maintaining equal                     margin-right  5px     space between two boxes                                a selected                  background orange                  color white                         lt  style gt       lt  head gt       lt body gt           lt a class  item  href      gt item 1 lt  a gt           lt a class  item  href      gt item 2 lt  a gt           lt a class  item  href      gt item 3 lt  a gt           lt a class  item  href      gt item 4 lt  a gt           lt a class  item  href      gt item 5 lt  a gt           lt a class  item  href      gt item 6 lt  a gt            lt script gt              var anchorArr document getElementsByTagName  a                var prevA                 for var i 0 i lt anchorArr length i                                  anchorArr i  onclick   function                        if prevA      amp  amp  prevA  this                                                prevA className  item                                             this className  item selected                       prevA this                                           lt  script gt       lt  body gt   lt  html gt

User · Answer

Set the styles for class active and hover     Than you need to make the li active  on the server side  So when you are drawing the menu  you should know which page is loaded and set it to     lt li class  active  gt Question lt  li gt    lt li gt Tags lt  li gt    lt li gt Users lt  li gt    But if you are changing the content without reloading  you cannot change set the active li element on the server  you need to use javascript    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 5 2 jquery min js  gt  lt  script gt   lt style gt     menu width  300px  height  25  font-size  18px      menu li list-style  none  float  left  margin-right  4px  padding  5px      menu li hover   menu li active           background-color   f90         lt  style gt   lt  head gt   lt body gt    lt ul class  menu  gt   lt li gt Item 1 lt  li gt   lt li class  active  gt Item 2 lt  li gt   lt li gt Item 3 lt  li gt   lt li gt Item 4 lt  li gt   lt li gt Item 5 lt  li gt   lt li gt Item 6 lt  li gt   lt  ul gt    lt script type  text javascript  gt   var make button active   function         Get item siblings   var siblings     this  siblings          Remove active class on all buttons   siblings each function  index                this  removeClass  active                    Add the clicked button class     this  addClass  active         Attach events to menu   document  ready    function               menu li   click make button active             lt  script gt   lt  body gt    lt  html gt

User · Answer

I use PHP to find the URL and match the page name  without the extension of  php  also I can add multiple pages that all have the same word in common like contact  contactform  etc  All will have that class added  and add a class with PHP to change the color  etc  For that you would have to save your pages with file extension  php   Here is a demo  Change your links and pages as required  The CSS class for all the links is  tab and for the active link there is also another class of  currentpage  as is the PHP function  so that is where you will overwrite your CSS rules  You could name them whatever you like    lt  php   Using REQUEST URI      currentpage     SERVER  REQUEST URI     gt       lt div class  nav  gt           lt div class  tab               lt  php                  if preg match   index i    currentpage     currentpage                             echo   currentpage                  gt   gt  lt a href  index php  gt Home lt  a gt            lt  div gt            lt div class  tab               lt  php                  if preg match   services i    currentpage                        echo   currentpage                  gt   gt  lt a href  services php  gt Services lt  a gt            lt  div gt            lt div class  tab               lt  php                  if preg match   about i    currentpage                        echo   currentpage                  gt   gt  lt a href  about php  gt About lt  a gt            lt  div gt            lt div class  tab               lt  php                  if preg match   contact i    currentpage                        echo   currentpage                  gt   gt  lt a href  contact php  gt Contact lt  a gt            lt  div gt        lt  div gt   lt  --nav-- gt

[html] How to dynamically change the color of the selected menu item of a web page?

Examples related to html

Examples related to css

Examples related to background-color

Examples related to menu-items

Examples related to menuitem-selection