
January 3rd, 2013, 09:37 AM
|
|
Registered User
|
|
Join Date: Jan 2013
Posts: 1
Time spent in forums: 8 m 20 sec
Reputation Power: 0
|
|
|
New Member - Nav Tabs wont become active when clicked!
Can anyone help with this css issue please. All is fine but when you click a tab it doesnt become active as the default home tab. Iam sure its a real quick fix but im stumped!
<html>
<head>
<style>
.tabrow {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
}
.tabrow li {
margin: 0 1px;
padding: 0 10px;
border: 1px solid #AAA;
background: #ECECEC;
display: inline-block;
}
.tabrow li.selected {
background: #FFF;
color: #000;
}
.tabrow {
position: relative;
}
.tabrow:after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}
.tabrow:before {
z-index: 1;
}
.tabrow li {
position: relative;
z-index: 0;
}
.tabrow li.selected {
z-index: 2;
border-bottom-color: #FFF;
}
</style>
</head>
<body>
<ul class="tabrow">
<li class="selected">Home</li>
<li>Test3</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</body>
</html>
|