jQuery tab technique
- Started
- Last post
- 11 Responses
- ornj0
put it in http://pastebin.com/
- 3030
var $container =
"#"+$(this).parent().parent().pa...
var $tabs =
"#"+$(this).parent().parent().at...
- 3030
QBN has awkward way of truncating strings:
var $container = "#"+$(this).parent().parent().pa...
var $tabs = "#"+$(this).parent().parent().at...
- 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>
- 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.
- 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.
- 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 :)
- 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...
- 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 :)