Question

您好我正在使用此Jquery Slider Tabs，我尝试通过点击包含id bypasstab

的div来打开标签内容

我的Html结构是，

<div id="bypasstab">General Link/div>

<div id="mySliderTabs">
  <!-- Unordered list representing the tabs -->
  <ul>
    <li><a href="#canyon">The Grand Canyon</a></li>
    <li><a href="#taj">The Taj Mahal</a></li>
    <li><a href="#bigben">Big Ben</a></li>
  </ul>

  <!-- Afterwards, include the div panels representing the panels of our slider -->
  <div id="canyon">
    <h3>The Grand Canyon</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="taj">
    <h3>The Taj Mahal</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="bigben">
    <h3>Big Ben</h3>
    <!-- rest of the panel content -->
  </div>
</div>

和javascript

var slider = $("div#mySliderTabs").sliderTabs({
  autoplay: true,
  mousewheel: false,
  position: "bottom"
});

有人知道怎么做吗？

Answer 1

//为我工作

$(function(){
/* FOR TAB*/
$('#tabs li a').click(function(e){
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
    $(this).parent().addClass('current');
    var currentTab = $(this).attr('href'); 
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();

});

/* JS FOR BYPASS TAB */
 $('#bypass').click(function(e){  
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
    $('#tabs1').addClass('current');//***** Tab change 
    var currentTab = $('#tabs li a').attr('href');
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();
    }); 
});

// HTML

<div id="tabwrap">
<ul id="tabs">
   <li id="tabs1" class="current"><a href="#con1"></a></li>
       <li id="tabs2"><a href="#con2"></a></li>
   <li id="tabs3"><a href="#con3"></a></li>
</ul>
<div id="content">
 <div id="con1" class="current">bha bha</div>
 <div id="con2">bha bha</div>
 <div id="con3">bha bha</div>
</div>
 <a id="bypass" href="#con1">bha</a>
</div>

Jquery Slider选项卡 - 打开选项卡单击链接或ID

1 个答案: