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

此代码显示的是带有垂直文本和内容的垂直选项卡。切换无法正常工作，当我单击第二个选项卡时，也会显示第一个内容。有人能帮我获取各个标签页的内容吗？这里我提到了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>

新闻

公司维护
雇员

报告

报告1
报告2
报告3


员工维护


人力资源


站点

公司维护
雇员

报告

报告1
报告2
报告3


员工维护


人力资源



“配置文件”选项卡。

$.fn.extend({
树型：函数（o）{
var openedClass='glyphicon减号'；
var closedClass='glyphicon加号'；
如果（类型o！=“未定义”）{
if（o.openedClass的类型！=“未定义”）{
openedClass=o.openedClass；
}
if（o.closedClass的类型！=“未定义”）{
closedClass=o.closedClass；
}
};
var-tree=$（这个）；
addClass（“树”）；
tree.find（'li'）。有（'ul'）。每个（函数（）{
var branch=$（this）；//li与子对象ul
分支。预结束（“”）；
branch.addClass（“branch”）；
“点击”功能（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'）。每个（函数（）{
$（此）.on（'click'，函数（）{
$（this）.最近（'li'）。单击（）；
});
});
tree.find（'.branch>a'）。每个（函数（）{
$（此）.on（'click'，函数（e）{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
});
tree.find（'.branch>button'）。每个（函数（）{
$（此）.on（'click'，函数（e）{
$（this）.最近（'li'）。单击（）；
e、 预防默认值（）；
});
});
}
});
$（'#tree1'）.treed（）；

---

您忘记了jQuery的导入（JSFIDLE控制台引发了该错误）以及选项卡面板上的Boostrap类（选项卡窗格）和ID（标签的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>

主页选项卡。
“配置文件”选项卡。

我简化了主面板中的代码，以避免发布一大块不相关的代码

希望这有帮助

---

使用完整的代码。

您可以发布一个可用的JSFIDLE或codepen链接吗？请在JSFIDLE中找到上面的链接。当我点击profile选项卡时，应该只显示该div中的内容，但这里也显示了第一个选项卡内容，如何在jquery中实现它？home选项卡中的树结构没有为我显示，profile选项卡显示其内容。检查codepen，在那里可以看到完整的代码。基本上添加jquery，只需更改即可。但删除id=left将删除我的整个树结构代码笔中没有显示任何内容，也只有显示配置文件内容的配置文件选项卡。您不能有多个id，正如我所说，您需要的id是标记a的href的内容。使用类而不是ID。顺便说一下，在我的代码笔中，如果我单击HOME，我可以看到树结构。。。。。。

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