[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

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>

Open in new window

0
yando18
Asked:
yando18
  • 2
  • 2
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
Can't make out from this much code unless you can share showonlyone method and related code
0
 
yando18Author Commented:
Here is the script:

<!-- Script Modal Tabs  -->
<script type="text/javascript">
function showonlyone(thechosenone) {
    $$(".modal_content")[0].getElements("div[name=newboxes]").each(function(item, i){
        if (item.get('id') == thechosenone) {                            
            item.show();
        } else {
            item.hide();
        }
    });
}

</script>
0
 
Chris StanyonCommented:
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


0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Gurvinder Pal SinghCommented:
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( );
}
0
 
yando18Author Commented:
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].getElements("div[name=newboxes]").each(function(item, i){
        if (item.get('id') == thechosenone) {                            
                  selectedIndex = i;
            item.show();
        } else {
            item.hide();
        }
    });
      var tabs = $$(".modal_content")[0].getElements(".list li a");
      tabs[selectedIndex-1].addClass('active');
      tabs[oldSelectedIndex-1].removeClass('active');
      console.log(tabs);
}

</script>
0
 
Chris StanyonCommented:
yando,

There seems to be some confusion on what you mean by Active.

In your original post, the CSS indicated that you meant the active state of a link, as shown by the following pseudo class selector

a:active //note the colon

This is not the same as you adding a class of active to an element. That would be represented by a class selector

a.active //note the fullstop

They are two very different things, and the similar names can cause some confusion. If you are wanting to indicate an 'active' state by adding a class, then consider renaming it - maybe something like selected.


0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now