JQuery tab selectors
2 answers
just hide and show divs works great here
<html>
<head>
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
$(function() {
$(".nextButton").click(function() {
$(this).parent().hide().next().show();
});
$(".prevButton").click(function() {
$(this).parent().hide().prev().show();
});
});
</script>
</head>
<body>
<div>
Tab One<br/>
<input type="button" class="nextButton" value="next"/>
</div>
<div style="display:none;">
Tab Two<br/>
<input type="button" class="prevButton" value="prev"/>
<input type="button" class="nextButton" value="next"/>
</div>
<div style="display:none;">
Tab Three<br/>
<input type="button" class="prevButton" value="prev"/>
</div>
</body>
</html>
+3
a source to share
Just create divs on top of each other and show / hide them using show () and hide (). No need for tabs if you just want to switch views programmatically. It's as easy as
Html:
<div class="view" id="view1">
</div>
<div class="view" id="view2">
</div>
<div class="view" id="view2">
</div>
JavaScript:
function selectView(i) {
$(".view").hide();
$("#view" + 1).show();
}
or if you don't want to use IDs:
function selectView(i) {
$(".view").hide();
$(".view :eq(" + 1 + ")").show();
}
0
a source to share