StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAppend CSS Class
primarykey
Id
12699239
data
AcceptedAnswerId
12699709
AnswerCount
2
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2012-10-02T22:19:34.737
FavoriteCount
0
LastActivityDate
2012-12-31T16:25:00.057
LastEditDate
2012-12-31T16:25:00.057
LastEditorUserId
2291
OwnerUserId
1698144
ParentId
0
PostTypeId
1
Score
0
ViewCount
118
LastEditorDisplayName
text
Body
<p>I have a tab-styled navigation menu. My goal:</p> <ol> <li>Once the user mousovers tab X. add the "tabActive" class to tab X, if the tab already has the "tabActive" class, then remove it</li> <li>Show Div "X"</li> </ol> <p>I have the second part down, and my java code detects which tab is being hovered, but I can not get my additional class toggled correctly.</p> <p>My code so far:</p> <p><strong>HTML</strong></p> <pre><code><div id="subnav"> <div id="nav1" onmouseover="toggleDisplay('contentPayment')" class="Payment myNav"> <a href="#">Payment</a></div> <div id="nav2" onmouseover="toggleDisplay('content-shipping')" class="Shipping myNav"> <a href="#">Shipping</a></div> <div id="nav3" class="Warranty myNav"> <a href="#">Warranty</a></div> <div id="nav4" class="Feedback myNav"> <a href="#">Feedback</a></div> </div> </code></pre> <p><strong>JAVASCRIPT</strong></p> <pre><code><script> var divs = new Array(); divs.push("contentPayment"); divs.push("content-shipping"); function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function toggleDisplay(id) { for (var i = 0; i < divs.length; i++) { var item = document.getElementById(divs[i]); item.style.display = 'none'; } //Now use the passed ID to show the div you wanted to show var target = document.getElementById(id); target.style.display = 'block'; if (id == "contentPayment") { var CurrentTab = document.getElementById("nav1"); var AlreadyActive = hasClass("nav1", " tabActive"); if (AlreadyActive == true) { CurrentTab.className = "Payment myNav"; } else { CurrentTab.className += " " + "tabActive"; } } } </script> </code></pre> <p>Any ideas what my problem is? I know jQuery would be <em>much</em> easier, but I am coding for eBay and they do not allow it. How do I get my tabActive class to toggle correctly?</p>
Tags
<javascript><css><class>
Title
Append CSS Class
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USJon Adams
UserOwnerUserId
1. USuser1698144
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POAppend CSS Class
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTModeratorReview
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.