Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use a 'data-type=""' attribute or just use a name attribute to manage the on-states of this menu:</p> <pre><code>&lt;nav&gt; &lt;ul class="navtab"&gt; &lt;li class='home selected' id="homepage" name="nav_item"&gt;&lt;a href='#'&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class='about' id="company" name="nav_item"&gt;&lt;a href='#'&gt;About&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;​ </code></pre> <p>And then here is the jQuery:</p> <pre><code>$("[name='nav_item']").click(function(){ $("[name='nav_item']").removeClass('selected'); $(this).addClass('selected'); });​ </code></pre> <p>The jQuery removes all instances of the 'selected' class when a nav-item is clicked, then adds the 'selected' class to the link that was clicked. Let me know if this will work for you...I've made a jsFiddle of it <a href="http://jsfiddle.net/PLjc9/" rel="nofollow">here</a>. </p> <p>You can then use the ids for other things if you'd like. This just seems like a more efficient/cleaner way of doing it. </p> <p>This will work as long as you're not refreshing the page...otherwise use your back-end code (PHP, JSP etc) to manage the on-states. </p> <p>PHP example: </p> <pre><code>&lt;?php if (isset($_GET['page']) &amp;&amp; $_GET['page'] == 'homepage'){ $selected_link = 'class="selected"'; //set the class if page is homepage } else $selected_link = ''; //empty, will not throw and error ?&gt; </code></pre> <p>Then your link:</p> <pre><code>&lt;li class='home' id="homepage" &lt;?php echo $selected_link;?&gt;&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload