javascript - Highlight active (opened) link -

-

i want highlight active (opened) link . color must maintained time when link open. not on mouse click or hover.

here js way tried:

<script type="text/javascript">     $(document).ready(function(){      $("a.nav1").click(function () {       $(".active").removeclass("active");         $(this).addclass("active");       });     }); </script>

html links:

 <div id="navigation">                         <ul>           <li><a class="nav1" data-tab="#home" id="link-home"href="#home">home</a></li>           <li><a class="nav1" data-tab="#football" id="link-football" href="#football">football</a></li>           <li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">hockey</a </li>           </ul>      </div>

it work problem refresh , button. not change color previous link. other js ways got same problem.

only css not work. example:

  <div id="navigation">                            <ul>               <li><a class="nav1" data-tab="#home" id="link-home"href="#home">home</a></li>               <li><a class="nav1" data-tab="#football" id="link-football" href="#football">football</a></li>               <li><a class="nav1" data-tab="#hockey" id="link-hockey"href="#hockey">hockey</a     </li>               </ul>          </div>

and css

#home .nav1 {     color: #000;     background-image:url(farba3.png);  } #football .nav1 {     color: #000;     background-image:url(farba3.png);  } #hockey .nav1 {     color: #000;     background-image:url(farba3.png);  }

you'll want listen hash change events (window.onhashchange), , change active link accordingly.

here's example:

function locationhashchanged() {     $('.nav1').removeclass('active'); // remove active class elements     $('.nav1[href="' + location.hash + '"]').addclass('active'); // add active class element href equals new fragment identifier ("hashtag") }  window.onhashchange = locationhashchanged; // listen hash change event locationhashchanged(); // add active class appropriate link on initial page load

then, in css, you'll add rule list items have .active class.

want try it? there go.

note history api available , allows clean, nice urls. why not use it? using fragment identifiers outdated , not nice happen have js disabled.

if want use history api , worried browser support, can use history.js, makes using history api possible browsers don't support it. more info, please see repository.


Comments

Post a Comment

Popular posts from this blog

My HTML document is not linking to my CSS stylesheet properly -

-
i have been copy , pasting html , css tutorials try make work, right have; page (html) <!doctype html> <html> <head> <meta charset="utf-8"> <title>title of document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <h1>1this site</h1> <p>welcome site</p> </body> </html> style.css body {background-image:url(“background.png”);} h1 {font-family:arial, sans-serif;} the when load html in safari still unformatted. thanks in advance! check see if setting paths right if still have problem try use fill path : <link rel="stylesheet" type="text/css" href="http://127.0.0.1/test/style/style.css" />
Read more

php array slice every 2th rule -

-
i have array on php outputs in txt file: printing grid -- 1 values -- undef = -9.99e+08 20.2 \nprinting grid -- 1 values -- undef = -9.99e+08 102.0 \nprinting grid -- 1 values -- undef = -9.99e+08 55.1 \nprinting grid -- 1 values -- undef = -9.99e+08 -18.3 \n what point, need nummeric values @ beginning of each rule. 20.2, 102.0, 55.1, -18,3 etc... example, there can more or less in txt file. now do? have tested array slice function can't exclude rule: printing grid -- 1 values -- undef = -9.99e+08 this array slice code... $arraygood = array_slice($arraybad, 1, 4); and foreach loop create text file: $file = fopen("array.txt","w"); foreach ($arraygood $meting => $waarde) { echo fwrite($file,$waarde . '\n'); } fclose($file); thanks! as posted in comments, understanding have array of strings similar following: $lines = array( "printing grid -- 1 values -- undef = -9.99e+08", "20.2 \nprinting grid --...
Read more

node.js - Sending sockets to client side, Error: Converting circular structure to JSON -

-
i'm working in node js , i'm trying send array, clients, server every client normal emit, keeps giving me error: data = json.stringify(ev); typeerror: converting circular structure json shortly, do. var clients = new array(); io.sockets.on('connection', function(socket) { clients.push(socket); socket.on('loginuser', function(data){ io.sockets.emit("getusers", clients); }); i've seen couple of other people having problem, answers didn't work out me. looking @ bigger problem, can't send array of sockets client side. sockets objects make sense in current context/process. if want control sockets client side, instead add sort of rpc functionality.
Read more