当前位置: 动力学知识库 > 问答 > 编程问答 >

show pagination in a javascript tabs

问题描述:

I have this javascript code that allows me to show and hide tabs but my problem is when the user clicks on a link in the last tab it shows the first one. In another way the result of my clicks are hiden by the other tab.

Here is my javascript

$(document).ready(function() {

$("#content div").hide(); // Initially hide all content

$("#tabs li:first").attr("id","current"); // Activate first tab

$("#content div:first").fadeIn(); // Show first tab content

$('#tabs a').click(function(e) {

e.preventDefault();

if ($(this).closest("li").attr("id") == "current"){ //detection for current tab

return

}

else{

$("#content div").hide(); //Hide all content

$("#tabs li").attr("id",""); //Reset id's

$(this).parent().attr("id","current"); // Activate this

$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab

}

});

});

网友答案:

This $('#' + $(this).attr('name')).fadeIn(); is where I think your problem is. That is some very messed up code. Without seeing your markup, I'm not even sure what you were trying to do, but that isn't it. Anyway, you ended up trying to do that because your solution is messy to begin with. See my example below. I only do what is necessary...no need to add ids and attributes to everything to hide/show the appropriate things.

Here is a light and simple way to accomplish what you're looking for. Live demo (click here).

sample markup:

<ul class="tabs">
    <li>
      <a>Tab1</a>
    </li>
    <li>
      <a>Tab2</a>
    </li>
    <li>
      <a>Tab3</a>
    </li>
  </ul>
  <div class="content">
    <div>Tab1 Content</div>
    <div>Tab2 Content</div>
    <div>Tab3 Content</div>
  </div>

javascript:

$(document).ready(function() {

  $(".content div").not(':first').hide();

  var $content = $('.content');

  $('.tabs a').click(function() {
    var index = $(this).parent().index();
    var $selected = $('div:eq('+index+')', $content);
    $('div', $content).not($selected).hide();
    $selected.show();
  });

});
分享给朋友:
您可能感兴趣的文章:
随机阅读: