Question

我在这里查看了一系列相关问题，但由于我对JQuery的知识非常有限，因此无法使解决方案适应我的代码，所以任何帮助都会受到高度赞赏。

基本问题是我在选项卡中有选项卡，只有选项卡处于活动状态时链接才有效。我的理解是，非活动标签需要通过onclick行为设置为活动，但我不知道如何实现这一点。

更具体地说，如何修改页面中其他位置的链接以链接到下面的示例代码？

链接我试图开始工作：

<p><a href="#spss1to1">Tab1</a></p>
<p style="padding-left: 30px;"><a href="#spss-inner-1to1">Tab1a</a></p>
<p style="padding-left: 30px;"><a href="#spss-left-1to1">Tab1b</a></p>
<p><a href="#spss1toMany">Tab2</a></p>
<p style="padding-left: 30px;"><a href="#spss-inner-1toMany">Tab2a</a></p>
<p style="padding-left: 30px;"><a href="#spss-left-1toMany">Tab2b</a></p>

标签：

＆＃13;

<!-- jQuery -->
<p><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /></p>
<p>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
jQuery(function() {
jQuery( "#tabstop" ).tabs();
jQuery( "#tabs1" ).tabs();
jQuery( "#tabs2" ).tabs();
});
// ]]></script>
</p>
<div id="tabstop">
    <ul>
        <li><a href="#spss1to1">One-to-One</a></li>
        <li><a href="#spss1toMany">One-to-Many</a></li>
    </ul>
            <div id="spss1to1">
                <div id="tabs1">
                    <ul>
                        <li><a href="#spss-inner-1to1">Tab1a</a></li>
                        <li><a href="#spss-left-1to1">Tab1b</a></li>
                    </ul>
                    <div id="spss-inner-1to1">
                        <p align="center">Tab1a text</p>
                    </div>
                    <div id="spss-left-1to1">
                        <p align="center">Tab1b text</p>
                    </div>
                </div>
            </div>
            <div id="spss1toMany">
                <div id="tabs2">
                    <ul>
                        <li><a href="#spss-inner-1toMany">Tab2a</a></li>
                        <li><a href="#spss-left-1toMany">Tab2b</a></li>
                    </ul>
                    <div id="spss-inner-1toMany">
                        <p align="center">Tab2a text</p>
                    </div>
                    <div id="spss-left-1toMany">
                        <p align="center">Tab2b text</p>
                    </div>
                </div>
            </div>
</div>

＆＃13;

Answer 1

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#o-tabs" ).tabs();
    $( "#i-tabs-1" ).tabs();
    $( "#i-tabs-2" ).tabs();
  });
  </script>

<script type="text/javascript">
    $(document).ready(function() {

        $("#TabLink1-1 a").click(function() {
            $( "#o-tabs" ).tabs( "option", "active", 0 );
            $( "#i-tabs-1" ).tabs( "option", "active", 0 );
        });

        $("#TabLink2-2 a").click(function() {
            $( "#o-tabs" ).tabs( "option", "active", 1 );
            $( "#i-tabs-2" ).tabs( "option", "active", 1 );
        });

        $("#TabLink2-3 a").click(function() {
            $( "#o-tabs" ).tabs( "option", "active", 1 );
            $( "#i-tabs-2" ).tabs( "option", "active", 2 );
        });


    });

</script>


</head>
<body>

<!-- the links asked about in this question should take this form -->
<div id="TabLink1-1"><a href="#tab1-1">Tab 1-1</a></div>
<div id="TabLink2-2"><a href="#tab2-2">Tab 2-2</a></div>
<div id="TabLink2-3"><a href="#tab2-3">Tab 2-3</a></div>


<div id="o-tabs" class="tabs">
  <ul>
  <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab one content.</p>
    <div id="i-tabs-1">
      <ul>
        <li><a href="#tabs-1-1">Tab 1-1</a></li>
        <li><a href="#tabs-1-2">Tab 1-2</a></li>
        <li><a href="#tabs-1-3">Tab 1-3</a></li>
      </ul>
      <div id="tabs-1-1">
        <p>Tab one content.</p>
      </div>
      <div id="tabs-1-2">
        <p>tab two content.</p>
      </div>
      <div id="tabs-1-3">
        <p>tab three content.</p>
      </div>
    </div>
  </div>
  <div id="tabs-2">
    <p>tab two content.</p>
    <div id="i-tabs-2">
      <ul>
      <li><a href="#tabs-2-1">Tab 2-1</a></li>
        <li><a href="#tabs-2-2">Tab 2-2</a></li>
        <li><a href="#tabs-2-3">Tab 2-3</a></li>
      </ul>
      <div id="tabs-2-1">
        <p>Tab one content.</p>
      </div>
      <div id="tabs-2-2">
        <p>tab two content.</p>
      </div>
      <div id="tabs-2-3">
        <p>tab three content.</p>
      </div>
    </div>

  </div>
  <div id="tabs-3">
    <p>tab three content.</p>
  </div>
</div>

链接到嵌套的JQuery选项卡

1 个答案: