jQuery tab technique
- Started
- Last post
- 11 Responses
- ethios
hey guys, just wondering if anyone has any examples or knows how to perform this particular technique? hover each panel on the right and it changes the content in the left, and when you click it the content remains ststic until you hover again.
ive seen this so many times but now i need it for a project and i cant find anything! any help would be appreciated :)
- TheBlueOne0
Code Canyon has a couple of solutions if you want to pay a few bucks as well...
..but really, these things are all over the googles...
- ethios0
thanks guys, i know tutorials and stuff are readily available but for some reason i was just drawing a complete blank as to what to search for. thanks for the shove in the right direction :)
- gregorywieber0
For something simple like this, I'd recommend coding it from scratch rather than using a plugin if you're interested in learning more jquery in the process. The key to this kind of stuff is to start with semantic html, like an unordered list. You can use children() on a selector, to return for instance all of the list items in that list. If you're using HTML5, you can use attributes like data-id or data-myUniqueIdentifier on your list item tags, and give the same id's to your tabs. Then, it's just simple click and mouseover functions that hide all of the list items and then show the one with the matching id.
- gregorywieber0
Check out my homepage: gregorywieber.com . The featured video area uses this technique (source is here: http://gregorywieber.com/javascr… ). All you'd have to do is add another function for mouseovers. The whole thing is not much code at all.
- 3030
I wrote my own JS code for tabs using jQuery. The idea was that link in tab navigation triggers targeted tab, so IDs of tabs must match href attribute in tab nav:
the JS code:
switchTabs: function() {
$(".tabNav a").click(function(){
var $target = $(this).attr("href");
var $container = "#"+$(this).parent().parent().pa...
var $tabs = "#"+$(this).parent().parent().at...$($container +" .panelTab:visible").hide();
$($target).show();$($tabs + ".tabNav a").removeClass("current");
$(this).toggleClass("current", true);
$(this).blur();
return false;});
}HTML for tabs navigation:
<ul id="TabNav" class="tabNav">
<li><a class="current" href="#tabName1">Tab 1</a></li>
<li><a href="#tabName2">Tab 2</a></li>
</ul>HTML for tabs:
<div id="tabName1" class="panelTab">
content goes here
</div>
<div id="tabName2" class="panelTab">
content goes here
</div>
- 3030
QBN has awkward way of truncating strings:
var $container = "#"+$(this).parent().parent().pa...
var $tabs = "#"+$(this).parent().parent().at...
- 3030
var $container =
"#"+$(this).parent().parent().pa...
var $tabs =
"#"+$(this).parent().parent().at...
- ornj0
put it in http://pastebin.com/
- ********0