如何在菜单和子菜单上打开选项卡

Question

<ul class="gw-nav gw-nav-list col-md-3  ">
        <li class="tab-pane active" > <a href="#tab_a" data-toggle="pill"> Navigation Menu </a> </li>
        <li class="init-arrow-down"> <a href="javascript:void(0)"> Category 1 <b class="gw-arrow"></b> </a>
          <ul class="gw-submenu">
            <li> <a href="#tab_b" >Menu 1</a> </li>
            <li> <a href="#tab_c" >Menu 1</a> </li>
          </ul>
        </li>
        <li class="init-arrow-down"> <a href="javascript:void(0)"> Category 2 <b class="gw-arrow icon-arrow-up8"></b> </a>
          <ul class="gw-submenu">
            <li> <a href="#tab_d" >Menu 1</a> </li>
            <li> <a href="#tab_e" >Menu 1</a> </li>
            <li> <a href="#tab_f" >Menu 1</a> </li>
          </ul>
        </li>
        <li class="init-arrow-down"> <a href="javascript:void(0)"> Category 3 <b class="gw-arrow icon-arrow-up8"></b> </a>
          <ul class="gw-submenu">
            <li> <a href="#tab_g">Menu 1</a> </li>
            <li> <a href="#tab_h">Menu 1</a> </li>
            <li> <a href="#tab_i">Menu 1</a> </li>
          </ul>
        </li>
        <li > <a href="#tab_j"> Navigation Menu </a> </li>
        <li > <a href="#tab_k"> Navigation Menu </a> </li>
        <li > <a href="#tab_l"> Navigation Menu</a> </li>
        <li > <a href="#tab_m"> Navigation Menu </a> </li>
      </ul>

我正在尝试获取Tab应该在我点击菜单或子菜单时打开。我已经使用了jquery但是没有得到任何答案。这是我想要打开的标签

<div class="tab-content col-md-9">


<div class="tab-pane active" id="tab_a">
  <div class="row">

  <div class="col-sm-6 col-md-4">
<h4>Pane </h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>

    </div>

  </div>

</div>


        </div>

        <div class="tab-pane" id="tab_b">
             <h4>Pane B</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_c">
             <h4>Pane C</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_d">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_e">
             <h4>Pane E</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_f">
             <h4>Pane F</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_g">
             <h4>Pane G</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_h">
             <h4>Pane H</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_i">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_j">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_k">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_l">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
        <div class="tab-pane" id="tab_m">
             <h4>Pane D</h4>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                ac turpis egestas.</p>
        </div>
</div>

  </div>

我是非常新的引导程序，并找到确切的解决方案。 请帮我解决这个问题。

Css that i have used are 


/*=================left navibar begin=========================================*/

.gw-container.gw-main-container .gw-sidebar.gw-sidebar-fixed,
.gw-container.gw-main-container .gw-sidebar.gw-sidebar-fixed:before { left: auto }

.gw-sidebar {
  width: 320px;
  position: fixed;
  border: 1px solid #e5e5e5;
  border-width: 0 1px 0 0;
  background-color: #F2F2F2;
  bottom: 0;
  top: 0;
  left: 0;
}

.gw-sidebar .nano-pane {
  background: rgba(255, 255, 255, 0);
  font-size: 15px;
}

.gw-sidebar .gw-nav-list { border-right: 1px solid #CCC; }

.gw-sidebar .gw-nav-list li a { padding-left: 20px; }

.gw-nav-list {
  margin: 0;
  padding: 0;
  list-style: none
}

.gw-nav-list>li:first-child { border-top: 0; }

.gw-nav-list>li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #fcfcfc;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  text-decoration: none;
}
 @-webkit-keyframes 
arrow-slide {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}
 @-webkit-keyframes 
arrow-slide1 {  0% {
}
 100% {
-webkit-transform:rotate(225deg);
z-index:3
}
}

.gw-nav-list>li.arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid #bababa;
  border-left: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-down:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
}

.gw-nav-list>li.arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-right: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
  -webkit-animation: arrow-slide1 .5s 0s ease both;
}

.gw-nav-list>li.init-arrow-up:after {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  right: 10px;
  top: 15px;
  border-top: 1px solid #bababa;
  border-left: 1px solid #bababa;
  -webkit-transform: rotate(45deg);
}

.gw-nav-list>li.active { background-color: #fff; }

.gw-nav-list>li>a {
  display: block;
  height: 38px;
  line-height: 36px;
  padding: 0 16px 0 7px;
  background-color: #f9f9f9;
  color: #585858;
  text-shadow: none!important;
  font-size: 13px;
  text-decoration: none;
}

.gw-open > a { outline: 0; }

.gw-nav-list>li.gw-open { border-bottom-color: #e5e5e5 }

.gw-nav-list>li.gw-open>a {
  background-color: #fafafa;
  color: #1963aa
}

.gw-nav-list .gw-open>a,
.gw-nav-list .gw-open>a:hover,
.gw-nav-list .gw-open>a:focus { background-color: #fafafa }

.gw-nav .gw-open > a,
.gw-nav .gw-open > a:hover,
.gw-nav .gw-open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}

.gw-nav-list>li.active>a,
.gw-nav-list>li.active>a:hover,
.gw-nav-list>li.active>a:focus,
.gw-nav-list>li.active>a:active {
  background-color: #fff;
  color: #dd4814;
  font-weight: bold;
  font-size: 13px;
}

.gw-nav-list>li>a,
.gw-nav-list .gw-nav-header { margin: 0 }
.gw-nav-list>li.active>a>[class*="icon-"] {
 font-weight: normal
}

.gw-nav-list>li.active>a:hover:before { display: none }

.gw-nav-list>li.active:before {
  display: inline-block;
  content: "";
  position: absolute;
  right: -2px;
  top: -1px;
  bottom: 0;
  z-index: 1;
  border: 2px solid #dd4814;
  border-width: 0 2px 0 0
}

.gw-nav-list li.gw-open>a:after { display: none }

.gw-nav-list>li a>.gw-arrow {
  display: inline-block;
  width: 14px!important;
  height: 14px;
  line-height: 14px;
  text-shadow: none;
  font-size: 18px;
  position: absolute;
  right: 11px;
  top: 11px;
  padding: 0;
  color: #666
}

.gw-nav-list>li a:hover>.gw-arrow,
.gw-nav-list>li.active>a>.gw-arrow,
.gw-nav-list>li.gw-open>a>.gw-arrow { color: #1963aa }

.gw-nav-list>li>a>[class*="icon-"]:first-child {
  display: inline-block;
  vertical-align: middle;
  min-width: 30px;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  margin-right: 2px
}

.gw-nav-list>li.active .gw-submenu {
 display: block -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
  -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
  box-shadow: inset 0px 0px 5px rgba(0,0,0,0.13);
}

.gw-nav-list>li .gw-submenu {
  font-size: 13px;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
}

.gw-nav-list>li .gw-submenu>li {
  margin-left: 0;
  position: relative
}

.gw-nav-list>li .gw-submenu>li>a {
  display: block;
  position: relative;
  color: #616161;
  padding: 7px 0 9px 43px;
  margin: 0;
  border-top: 1px dotted #e4e4e4;
  font-size: 14px;
  text-decoration: none;
}

.gw-nav-list>li .gw-submenu>li>a:focus { text-decoration: none }

.gw-nav-list>li .gw-submenu>li>a:hover {
  text-decoration: none;
  color: #dd4814;
  background-color: rgba(25,25,50,0.1);
}

.gw-nav-list>li .gw-submenu>li.active:after {
  display: inline-block;
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: 0;
  z-index: 1;
  border: 2px solid #dd4814;
}

.gw-nav-list>li .gw-submenu>li.active>a { color: #dd4814 }

.gw-nav-list>li .gw-submenu>li a>[class*="icon-"]:first-child {
  display: none;
  font-size: 12px;
  font-weight: normal;
  width: 18px;
  height: auto;
  line-height: 12px;
  text-align: center;
  position: absolute;
  left: 10px;
  top: 11px;
  z-index: 1;
  background-color: #FFF
}

.gw-nav-list>li .gw-submenu>li.active>a>[class*="icon-"]:first-child,
.gw-nav-list>li .gw-submenu>li:hover>a>[class*="icon-"]:first-child { display: inline-block }

.gw-nav-list>li .gw-submenu>li.active>a>[class*="icon-"]:first-child { color: #c86139 }

.gw-nav-list>li>.gw-submenu>li:first-child>a { border-top: 0px; }

.gw-nav-list li .gw-submenu { overflow: hidden }

.gw-nav-list li.active.gw-open>.gw-submenu>li.active.gw-open>a.dropdown-toggle:after { display: none }

.gw-nav-list li.active>.gw-submenu>li.active>a:after { display: none }

.gw-nav-list li.active.gw-open>.gw-submenu>li.active>a:after { display: block }

.gw-nav-tabs li[class*=" icon-"],
.nav-tabs li[class^="icon-"] {
  width: 1.25em;
  display: inline-block;
  text-align: center
}
/*=================left navibar end=========================================*/

Here is my Javascript
$(document).ready(function () {
    var nav = function () {
        $('.gw-nav > li > a').click(function () {
            var gw_nav = $('.gw-nav');
            gw_nav.find('li').removeClass('active');
            $('.gw-nav > li > ul > li').removeClass('active');

            var checkElement = $(this).parent();
            var ulDom = checkElement.find('.gw-submenu')[0];

            if (ulDom == undefined) {
                checkElement.addClass('active');
                $('.gw-nav').find('li').find('ul:visible').slideUp();
                return;
            }
            if (ulDom.style.display != 'block') {
                gw_nav.find('li').find('ul:visible').slideUp();
                gw_nav.find('li.init-arrow-up').removeClass('init-arrow-up').addClass('arrow-down');
                gw_nav.find('li.arrow-up').removeClass('arrow-up').addClass('arrow-down');
                checkElement.removeClass('init-arrow-down');
                checkElement.removeClass('arrow-down');
                checkElement.addClass('arrow-up');
                checkElement.addClass('active');
                checkElement.find('ul').slideDown(300);
            } else {
                checkElement.removeClass('init-arrow-up');
                checkElement.removeClass('arrow-up');
                checkElement.removeClass('active');
                checkElement.addClass('arrow-down');
                checkElement.find('ul').slideUp(300);

            }
        });
        $('.gw-nav > li > ul > li > a').click(function () {
            $(this).parent().parent().parent().removeClass('active');
            $('.gw-nav > li > ul > li').removeClass('active');
            $(this).parent().addClass('active')
        });
    };
    nav();
});

Lastly used jquery this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>