Forum Moderators: not2easy

Message Too Old, No Replies

Problems with tabs

Problems

         

suf3r

4:13 pm on Dec 16, 2009 (gmt 0)

10+ Year Member



Hello,
I have problem:

My categories:
(from .php code)


<ul class="tabs">
<li><a href="killer.php">Killer</a></li>
<li><a href="killer1.php">Killer1</a></li>
<li><a href="killer2.php">killer2</a></li>
<li><a href="killer3.php">killer3</a></li>
<li><a href="killer4.php">killer4</a></li>
<li><a href="killer5.php">killer5</a></li>
<li><a href="killer6.php">killer6</a></li>
<li><a href="killer7.php">killer7</a></li>
</ul>

style.css


ul.tabs
{
margin: 0;
margin-left: 10px;
margin-top: 6px;
padding: 0;
list-style: none;
float: left;
}
ul.tabs li
{
float: left;
margin: 0;
padding: 0;
padding-top: 0;
margin-right: 5px;
padding-bottom: 7px;
background: url(../images/dark/menuitem_right.gif) no-repeat right top;
}
ul.tabs li a
{
display: block;
color: #fff;
padding: 0px 14px;
text-decoration: none;
font-weight: bold;
background: url(../images/dark/menuitem_left.gif) no-repeat left top;
font-size: 12px;
padding-top: 5px;
padding-bottom: 7px;
}
ul.tabs li a:hover
{
text-decoration: underline;
}
ul.tabs li.selected a
{
background: url(../images/dark/menuitem_selected_left.gif) no-repeat left top;
color: #85c71d;
}
ul.tabs li.selected
{
background: url(../images/dark/menuitem_selected_right.gif) no-repeat right top;
}

Problem:
Then i click from killer to killer6, the ul.tabs li.selected a and ul.tabs li.selected i see clicked buttons (changed), but then click killer7 the ul.tabs li.selected a and ul.tabs li.selected doesn't activates and i see normal button.

Any sulution ?

SuzyUK

5:30 pm on Dec 16, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi suf3r, and Welcome to WebmasterWorld,

when you click on killer7 and view the source of that page has the classname

.selected
been added to the <li> item for that page

i.e.

<ul class="tabs">
<li><a href="killer.php">Killer</a></li>
<li><a href="killer1.php">Killer1</a></li>
<li><a href="killer2.php">killer2</a></li>
<li><a href="killer3.php">killer3</a></li>
<li><a href="killer4.php">killer4</a></li>
<li><a href="killer5.php">killer5</a></li>
<li><a href="killer6.php">killer6</a></li>
<li class="selected"><a href="killer7.php">killer7</a></li>
</ul>

suf3r

7:52 pm on Dec 16, 2009 (gmt 0)

10+ Year Member



Thanks