Menu
Ok let me make an example:
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#options_2").hide();
$("#options_3").hide();
});
</script>
</head>
<body>
<div id="options_1">option 1</div>
<div id="options_2">option 2</div>
<div id="options_3">option 3</div>
<a href="" class="selected">choose option 1</a>
<a href="">choose option 2</a>
<a href="">choose option 3</a>
</body>
As you can see only option 1 is visible by default, and the link you click to show option 1 has the class="selected" by default, showing the user that that option is currently selected. I basically want it so that when they click "choose option 2" the options 1 div hides itself and the options 2 div shows itself, and then gives the second link the selected class and removes the class from the image link.
It basically just tabs using links and divs but due to the format I have to display it in I cannot use any of the tabs plugins I have found online.
345
First of all give your links a class or Id (I've used a class), which will make it easier to do the swap in
<div id="options_1" class="tab" >option 1</div>
<div id="options_2" class="tab">option 2</div>
<div id="options_3" class="tab">option 3</div>
$(document).ready(function () {
var clickHandler = function (link) {
$('.tab').hide();
$('#option_' + link.data.id).show();
$('.selected').removeClass('selected');
$(this).attr('class','selected');
}
$('.link1').bind('click', {id:'1'} ,clickHandler);
$('.link2').bind('click', {id:'2'} ,clickHandler);
$('.link3').bind('click', {id:'3'} ,clickHandler);
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
