Question

只是想知道如何在左边的嵌套jQuery选项卡中设置父选项卡的子选项卡。谢谢你的帮助！

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <title>News Updates.</title>   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">   <link rel="stylesheet" href="/resources/demos/style.css">   <script src="//code.jquery.com/jquery-1.10.2.js"></script>   <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>   <script>   $(function() {
    $( "#tabs, #tabss" ).tabs({
      event: "mouseover"
    });   });   </script> </head> <body>   <div id="tabs">   <ul>
    <li><a href="#tabs-1">KeimoPack</a></li>
    <li><a href="#tabs-2">Coming Soon.</a></li>
    <li><a href="#tabs-3">Coming Soon.</a></li>   </ul>   <div id="tabs-1">
    <div id="tabss">    <script>   $(function() {
    $( "#tabss" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
    });
    </script>
      <ul>
        <li><a href="#tabss-1">Test</a></li>
        <li><a href="#tabss-2">Test 2</a></li>
      </ul>
        <div id="tabss-1">
          <p>This is a test.</p>
        </div>
        <div id="tabss-2">
          <p>This is another test.</p>
        </div>  </div>   </div>   <div id="tabs-2">
    <p>Coming Soon.</p>   </div>   <div id="tabs-3">
    <p>Coming Soon.</p>   </div> </div>
    </body> </html>

Answer 1

如果要将tabss-1和tabss-2设置为左侧，可以使用.children()方法。

父#tabss的所有孩子都将继承此课程

$( "#tabss" ).children().addClass( "ui-tabs-vertical ui-helper-clearfix" );

或父元素的特定子（组）：

$( "#tabss" ).children(".group-class, #group-id").addClass( "ui-tabs-vertical ui-helper-clearfix" );

在嵌套的jQuery中将子选项卡设置在左侧？

1 个答案: