[jQuery] Best practices for using anchors (<a>) for jQuery tabs?
Hello, I was wondering what the most efficient ways of using anchor
links when they are just being used for simple jQuery tabbed browsing.
For example, say I have two tabs, and on the page load only the first
content box is shown, with the html like so:
<div id="tabs">
<ul>
<li><a id="tab_1">Stop</a></li>
<li><a id="tab_2">Look</a></li>
</ul>
<div id="content_1">
Lorem ipsum dolor
</div>
<div id="content_2"> <!-- not shown on page load -->
Lorem ipsum dolor
</div>
</div>
I use jQuery to show the relevant content div when either <a> link is
clicked. That bit is fine.
But as you'll notice, I have no 'href' link inside my <a> anchors.
Therefore I have to add 'cursor: pointer' to my css to get the hand
cursor to appear when you hover over the tab. This does throw up a
warning in my html validation but not an error. So I'd like to know
whether this is best practice for these kind of jQuery tabs.
If I use <a href="#">Stop</a> the page can jump to the top when I
click on the tab, which doesn't look good.
What would you use to make this as perfect as possible?