Question

我正在使用Jquery Slider 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.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>

点击<p><a href="#bigben">Big Ben Tab</a></p>我需要打开第三个标签。我在Jsbin

中添加了相同的内容

有人知道怎么做吗？

Answer 1

你可以这样做：

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

下次使用Jsfiddle。我在Jsbin中重写了3次，如果你试图选择所有内容，它会清除屏幕，直到我放弃并在此重写...

Jquery访问Slider Tabs来自Tab外部

1 个答案: