Jquery从选项卡外部访问滑块选项卡_Jquery_Tabs

Jquery从选项卡外部访问滑块选项卡

jquery tabs

Jquery从选项卡外部访问滑块选项卡,jquery,tabs,Jquery,Tabs,我正在使用并想知道如何通过标签外的链接打开标签内容下面是我的html结构 <html> <head> <title> Test specs</title> <link rel="stylesheet" href="http://lopatin.github.io/sliderTabs/styles/jquery.sliderTabs.min.css"> <script src="http://ajax.g

我正在使用并想知道如何通过标签外的链接打开标签内容

下面是我的html结构

<html>
<head>
    <title> Test specs</title>
    <link rel="stylesheet" href="http://lopatin.github.io/sliderTabs/styles/jquery.sliderTabs.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://lopatin.github.io/sliderTabs/jquery.sliderTabs.js"></script>
    <script>
    $(document).ready(function(){
      var tabs = $("div#mySliderTabs").sliderTabs();
     });
  </script>
</head>
<body>

<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>

<div class="ess">
<p><a href="#bigben">Big Ben Tab</a></p>
</div>
</body>
</html>


测试规格
$（文档）.ready（函数（）{
var tabs=$（“div#mySliderTabs”）.sliderTabs（）；
});





大峡谷
泰姬陵
大本钟

单击

我需要打开第三个选项卡。我已经在中添加了相同的内容

有人知道怎么做吗？

你可以这样做：

<html>
<head>
    <title> Test specs</title>
    <link rel="stylesheet" href="http://lopatin.github.io/sliderTabs/styles/jquery.sliderTabs.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://lopatin.github.io/sliderTabs/jquery.sliderTabs.js"></script>
    <script>
    $(document).ready(function(){
      var tabs = $("div#mySliderTabs").sliderTabs();
      $('#bigbenlink').click(function(e){
          e.preventDefault();
          $('#bigbenslider').click();
      });
     });
  </script>
</head>
<body>

<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 id="bigbenslider" 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>

<div class="ess">
<p><a id="bigbenlink" href="#bigben">Big Ben Tab</a></p>
</div>
</body>
</html>


测试规格
$（文档）.ready（函数（）{
var tabs=$（“div#mySliderTabs”）.sliderTabs（）；
$（“#bigbenlink”）。单击（函数（e）{
e、 预防默认值（）；
$（“#bigbenslider”）。单击（）；
});
});





大峡谷
泰姬陵
大本钟

下次使用Jsfiddle。我在Jsbin中重写了3次，如果您尝试选择所有内容，就会清除屏幕，直到我放弃并在这里重写