StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17822250
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-07-23T22:41:33.040
FavoriteCount
0
LastActivityDate
2013-07-25T08:25:31.520
LastEditDate
2013-07-25T08:25:31.520
LastEditorUserId
82548
OwnerUserId
82548
ParentId
17822180
PostTypeId
2
Score
4
ViewCount
0
LastEditorDisplayName
text
Body
<pre><code>var idToClass = { 'aboutLink' : 'linkActive', 'sasLink' : 'link2Active' } $('#nav a').click(function(){ e.preventDefault(); $(this).addClass(idToClass[this.id]); }); </code></pre> <a href="http://jsfiddle.net/davidThomas/wqK8w/" rel="nofollow">JS Fiddle demo</a>. You could, instead, use <code>toggleClass()</code> to allow for those classes to be removed by a second click: <pre><code>var idToClass = { 'aboutLink' : 'linkActive', 'sasLink' : 'link2Active' } $('#nav a').click(function(e){ e.preventDefault(); $(this).toggleClass(idToClass[this.id]); }); </code></pre> <a href="http://jsfiddle.net/davidThomas/wqK8w/1/" rel="nofollow">JS Fiddle demo</a>. Edited in response to question, from the OP, in comments, below: <blockquote> How would I remove the class so that both links don't appear to be active at the same time? </blockquote> There's a few ways, but because you're adding different class-names to denote the 'active' state, they're a little inefficient. The first approach is to use a brute-force method, effectively looking for all <code>a</code> elements that have a <code>class</code> attribute and setting that attribute to the empty string, and then adding the <code>linkActive</code>/<code>link2Active</code> class-name to the clicked-on <code>a</code> element: <pre><code>$('#nav a').click(function(e){ e.preventDefault(); var self = $(this); self.closest('ul').find('a[class]').attr('class', ''); self.toggleClass(idToClass[this.id]); }); </code></pre> <a href="http://jsfiddle.net/davidThomas/wqK8w/3/" rel="nofollow">JS Fiddle demo</a>. The alternative is to remove the specific classes from the elements who have their <code>id</code> listed in the <code>idToClass</code> object. This is, however, somewhat expensive in that it needs to iterate over the object, retrieving the <code>id</code>, finding the element with that <code>id</code> and then removing a <code>class</code>-name: <pre><code>$('#nav a').click(function(e){ e.preventDefault(); for (var id in idToClass) { if (idToClass.hasOwnProperty(id)){ $('#' + id).removeClass(idToClass[id]); } } $(this).addClass(idToClass[this.id]); }); </code></pre> <a href="http://jsfiddle.net/davidThomas/wqK8w/4/" rel="nofollow">JS Fiddle demo</a>. If, of course, you use a common class-name then it all becomes much easier: <pre><code>$('#nav a').click(function (e) { e.preventDefault(); var self = $(this); self.closest('ul') .find('.commonActiveClassName') .removeClass('commonActiveClassName'); self.addClass('commonActiveClassName'); }); </code></pre> <a href="http://jsfiddle.net/davidThomas/wqK8w/5/" rel="nofollow">JS Fiddle demo</a>. References: <ul> <li><a href="http://api.jquery.com/addClass/" rel="nofollow"><code>addClass()</code></a>.</li> <li><a href="http://api.jquery.com/closest/" rel="nofollow"><code>closest()</code></a>.</li> <li><a href="http://api.jquery.com/event.preventDefault/" rel="nofollow"><code>event.preventDefault()</code></a>.</li> <li><a href="http://api.jquery.com/find/" rel="nofollow"><code>find()</code></a>.</li> <li><a href="http://api.jquery.com/removeClass/" rel="nofollow"><code>removeClass()</code></a>.</li> <li><a href="http://api.jquery.com/toggleClass/" rel="nofollow"><code>toggleClass()</code></a>.</li> </ul>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POadding specific class to element on click jquery
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USDavid Thomas
UserOwnerUserId
1. USDavid Thomas
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. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
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.