javascript - 如何使用 jquery 使用垂直文本和内容切换垂直选项卡

Question

此代码显示带有垂直文本和内容的垂直选项卡。 Toggle 无法正常工作，当我单击第二个选项卡时，第一个内容也会显示。谁能帮我获取各个选项卡的内容？这里我提到了 html、css 和 javascript 代码。在 Jquery 中有可能吗？任何人都可以提及细节吗？

<main id="main">       
<section id="portfolio"> 
<div class="container-fluid">
  <div class="row">
   <div class="col-lg-3 col-md-4">
    <div class="vtab">
      <div class="col-xs-3">
          <ul class="nav nav-tabs tabs-left vertical-text">
              <li class="active"><a href="#home-v" data-toggle="tab">Home</a> 
               </li>
              <li><a href="#profile-v" data-toggle="tab">Profile</a></li>
             </ul>
      </div>
      <div class="col-xs-9">
          <div class="tab-content">
        <div id="left" >
                    <div>
          <ul id="tree1" >
                    <li id="li2">News
                  <ul>
                      <li>Company Maintenance</li>
                      <li>Employees
                          <ul>
                              <li>Reports
                                  <ul>
                                      <li>Report1</li>
                                      <li>Report2</li>
                                      <li>Report3</li>
                                  </ul>
                              </li>
                              <li>Employee Maint.</li>
                          </ul>
                      </li>
                      <li>Human Resources</li>
                  </ul>
              </li>

               <li id="li2">Sites
                  <ul>
                      <li>Company Maintenance</li>
                      <li>Employees
                          <ul>
                              <li>Reports
                                  <ul>
                                      <li>Report1</li>
                                      <li>Report2</li>
                                      <li>Report3</li>
                                  </ul>
                              </li>
                              <li>Employee Maint.</li>
                          </ul>
                      </li>
                      <li>Human Resources</li>
                  </ul>
              </li>
          </ul>
        </div>
    </div>
              <div class="tab-pane" id="profile-v">Profile Tab.</div>
              </div>
      </div>
      <div class="clearfix"></div>    
        </div>    
        </div>
        </div>
        </div>

      </div>
    </section>

<script type="text/javascript">
  $.fn.extend({
    treed: function (o) {

      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';

      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
    }
});

$('#tree1').treed();

  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  <link 
    href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" 
    rel="stylesheet" id="bootstrap-css">
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"> 
 </script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- 
 combined.min.css" rel="stylesheet" id="bootstrap-css">
 <script src="//netdna.bootstrapcdn.com/twitter- 
        bootstrap/2.3.2/js/bootstrap.min.js"></script> 

Answer 1

您忘记了在选项卡面板上导入 jQuery(JSfiddle 控制台引发该错误)和 Boostrap 类(选项卡 Pane )和 ID(a 标记的 href 的内容)。

这里是正确的代码:

来自 CDN 的 jQuery 脚本:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

这里是右边的面板代码:

<section id="portfolio">
   <div class="container-fluid">
      <div class="row">
         <div class="col-lg-3 col-md-4">
            <div class="vtab">
               <div class="col-xs-3">
                  <hr/>
                  <ul class="nav nav-tabs tabs-left vertical-text">
                     <li class="active"><a href="#home-v" data-toggle="tab">Home</a></li>
                     <li><a href="#profile-v" data-toggle="tab">Profile</a></li>
                  </ul>
               </div>
               <div class="col-xs-9">
                  <!-- Tab panes -->
                  <div class="tab-content">
                     <div class="tab-pane" id="home-v">Home Tab.</div>
                     <div class="tab-pane" id="profile-v">Profile Tab.</div>
                  </div>
               </div>
               <div class="clearfix"></div>
            </div>
         </div>
      </div>
   </div>
   </div>
</section>

我简化了主页面板中的代码，以免发布大量不相关的代码。

希望这对您有所帮助!

工作 codepen link带有完整代码。