yando18
asked on
Active state on list nav not rendering
For some reason I cannot figure out why the code below doesn't render with the active state.
Here is the code Im having an issue with:
css:
.vzt ul.list { padding:0px;margin:0px; }
.vzt ul li { float:left;list-style-type:none;padding:0px;margin:0px;height:45px; }
.vzt ul li a.li { display:block;padding-top:15px;height:15px;padding-bottom:15px;border-right:1px solid #292929;text-align:center;vertical-align:middle;background-color:#000;margin:0 0 0 0;text-decoration:none;color:#999999; }
.vzt ul li a.li:active { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#0cdbca;font-weight:bold; }
.vzt ul li a.li:visited { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#999999;font-weight:bold; }
.vzt ul li a.li:hover { margin:0px;font-size:12px;padding-top:15px;height:15px;padding-bottom:15px;color:#fff;font-weight:bold; }
.vzt ul li a.last { border:none;background:#000;}
.vzt ul li a.last:hover { border:none;background:#000;}
Html:
<ul class="list" id="tabs" style="padding-left:45px;margin:0px;">
<li><a id="myHeader2" href="javascript:showonlyone('newboxes2');" class="li" style="width:121px;">link1</a></li>
<li><a id="myHeader3" href="javascript:showonlyone('newboxes3');" class="li" style="width:137px;">link2</a></li>
<li><a id="myHeader4" href="javascript:showonlyone('newboxes4');" class="li" style="width:172px;">link3</a></li>
<li><a id="myHeader5" href="javascript:showonlyone('newboxes5');" class="li" style="width:161px;">link4</a></li>
<li><a id="myHeader6" href="javascript:showonlyone('newboxes6');" class="li" style="width:250px;">link5</a></li>
</ul>
Can't make out from this much code unless you can share showonlyone method and related code
ASKER
Here is the script:
<!-- Script Modal Tabs -->
<script type="text/javascript">
function showonlyone(thechosenone) {
$$(".modal_content")[0].ge tElements( "div[name= newboxes]" ).each(fun ction(item , i){
if (item.get('id') == thechosenone) {
item.show();
} else {
item.hide();
}
});
}
</script>
<!-- Script Modal Tabs -->
<script type="text/javascript">
function showonlyone(thechosenone) {
$$(".modal_content")[0].ge
if (item.get('id') == thechosenone) {
item.show();
} else {
item.hide();
}
});
}
</script>
For pseudo classes like this, :active needs to come after :hover, which in turn needs to come after :link and :visited.
Make sure the order of the pseudo classes in your CSS are in the following order:
a:link
a:visited
a:hover
a:active
Make sure the order of the pseudo classes in your CSS are in the following order:
a:link
a:visited
a:hover
a:active
rather than name attribute for the div, can you assign a class 'newboxes' and then
I guess what you are trying to do is, show the chosen one and hide the rest of divs with same class. Please confirm
function showonlyone(thechosenone)
{
$(".newboxes").hide();
$("#" + thechosenone ).show( );
}
I guess what you are trying to do is, show the chosen one and hide the rest of divs with same class. Please confirm
function showonlyone(thechosenone)
{
$(".newboxes").hide();
$("#" + thechosenone ).show( );
}
ASKER
I've updated the code, and its work for the most part. The issue now is when you click the tab and click again the state is no longer active.
<script type="text/javascript">
var selectedIndex = 1;
var oldSelectedIndex = 1;
function showonlyone(thechosenone) {
oldSelectedIndex = selectedIndex;
$$(".modal_content")[0].ge tElements( "div[name= newboxes]" ).each(fun ction(item , i){
if (item.get('id') == thechosenone) {
selectedIndex = i;
item.show();
} else {
item.hide();
}
});
var tabs = $$(".modal_content")[0].ge tElements( ".list li a");
tabs[selectedIndex-1].addC lass('acti ve');
tabs[oldSelectedIndex-1].r emoveClass ('active') ;
console.log(tabs);
}
</script>
<script type="text/javascript">
var selectedIndex = 1;
var oldSelectedIndex = 1;
function showonlyone(thechosenone) {
oldSelectedIndex = selectedIndex;
$$(".modal_content")[0].ge
if (item.get('id') == thechosenone) {
selectedIndex = i;
item.show();
} else {
item.hide();
}
});
var tabs = $$(".modal_content")[0].ge
tabs[selectedIndex-1].addC
tabs[oldSelectedIndex-1].r
console.log(tabs);
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.