Databases
StackOverflow2013
Postsdbo
POcss active feature not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss active feature not working
    text
    copied!<p>I have the menu bar below and i would like to change the css class to active of the html code when the pages has been selected. So when the user has selected to view said page i would like to set the active class which is already set</p> <p>HTML Code</p> <pre><code>&lt;div id="main-nav"&gt; &lt;ul&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear-both"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS code</p> <pre><code>#main-nav{ height:29px; float:left; background-image:url(../Styles/images/nav-bg.gif); background-repeat:repeat-x; background-position:top left; width:100%; } #main-nav ul, #main-nav li{ padding:0px; margin:0px; list-style-type:none; } #main-nav ul{ height:29px; line-height:29px; background-image:url(../Styles/images/nav-bar.gif); background-position:right; background-repeat:no-repeat; float:left; padding:0px 1px 0px 0px; margin:0px 0px 0px 10px; } #main-nav li{ height:29px; line-height:29px; display:inline; position:relative; float:left; width:80px; text-align:center; } #main-nav li a{ height:29px; width:80px; text-align:center; float:left; background-image:url(../Styles/images/nav-bar.gif); background-position:left; background-repeat:no-repeat; } #main-nav li a:link, #main-nav li a:visited{ color:#FFFFFF; text-decoration:none; } #main-nav li.active a, #main-nav li a:hover{ background-image:url(../Styles/images/active.gif); background-repeat:no-repeat; background-position:left; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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