?
Solved

Active state on list nav not rendering

Posted on 2010-09-14
6
Medium Priority
?
277 Views
Last Modified: 2012-05-10
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
Comment
Question by:yando18
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
6 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33676016
Can't make out from this much code unless you can share showonlyone method and related code
0
 

Author Comment

by:yando18
ID: 33676349
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33678242
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
Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33679420
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
 

Author Comment

by:yando18
ID: 33682240
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 33682359
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question