$(document).ready(function(){ $("#options_2").hid...">
Geek Answers Handbook

JQuery Variable Elements

Ok, let me give 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, by default only option 1 is displayed, and the link that you click to display option 1 defaults to class = ", showing the user that this option is currently selected. Basically, I want them to click when "select option 2", options 1 div are hidden themselves, and options 2 div are displayed themselves, and then gives a second link to the selected class and removes the class from the image link.

Basically these are just tabs using links and divs, but because of the format I have to display in it, I cannot use any of the tab plugins I found on the Internet.

+5
source share
4 answers

, ( ),

<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);
})
+12

, , - : , div (, "link_1" "option_1" ) jQuery:

$('a#link_1').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_1').show();
     $('div#option_1').siblings('div').hide();
});
    $('a#link_2').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_2').show();
     $('div#option_2').siblings('div').hide();
});
    $('a#link_3').click(function() {
     $(this).attr("class", "selected");
     $(this).siblings('a').removeClass("selected");
     $('div#option_3').show();
     $('div#option_3').siblings('div').hide();
});

jQuery , :)

+2

, "options_1_select" "openener" . :

$('a.opener').click(function() {
  // mark current link as selected and unmark all others
  $(this)
    .addClass('selected')
    .siblings('a').removeClass('selected');

  // find a div to show, and hide its siblings
  $('#' + $(this).attr('id').substring(0, 9))
    .show()
    .siblings('div').hide();
});
+1

, .

jQuery UI provides one: http://jqueryui.com/demos/accordion/

+1
source

More articles:


All Articles