javascript - How to highlight active nav tab in specific case -
I am using JS as a template, using JQuery with the API reference to select the appropriate NAV Does.
My current code:
index.php
& lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; ChillSpot Alpha 1.2.3 & lt; / Title & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "normal / style.css" & gt; & Lt; Script type = "text / javascript" src = "normal / jquery-1.11.2.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "background.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "normal / navyhite.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (getImage); & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (setNavigation); & Lt; / Script & gt; & Lt; / Head & gt; & Lt ;? Php included 'common / header.html'; ? & Gt; // More code, exemplified from example: Not relevant Normal / Navighight. JS
& lt ;! - Setting Navigation () {var path = window.location.pathname; Path = path.replace (/ \ / $ /, ""); Path = decoderiaconant (route); $ (". MenuList a") Each (function () {var href = $ (this) .attr ('href'); if (path.substring (0, href.length) === href) {$ (this) .clostest ('li') RemoveClass ('tab'); $ (this) .clostest ('li'). AddClass ('Selected tab');}}); } // -> Normal / header.html
& lt; Div class = "menu" & gt; & Lt; Ul class = "menuList" & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "index.php" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "comm.php" & gt; Communication & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "chillcraft / index.php" & gt; Chilcraft & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "forum.php" & gt; Forums & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "ud.php" & gt; Update & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "about.php" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "content" & gt; ... it is not working What is different in my situation which causes the example to fail? All "li" elements end with class "tab", no "tab is selected".
I 'm not sure what this is actually wrong, but I think that href In the example, everyone starts with / , while not your own.
So if you change it to your html then you may be okay:
& lt; Div class = "menu" & gt; ; & Lt; Ul class = "menuList" & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ index.php" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ comm.php" & gt; Communication & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ chillcraft / index.php" & gt; Chilcraft & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ forum.php" & gt; Forums & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ ud.php" & gt; Update & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "tab" & gt; & Lt; A href = "/ about.php" & gt; About & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;
Comments
Post a Comment