Problem with text display in tabview

0

I'm having a question with a tabview that I've developed with bootstrap it's working perfectly because I need the text content of the right part to always follow the links on the left in yellow that have a "little set". currently when I click the text of tabview it is always fixed in a place but I want it to follow my links by clicking this and the image NoticethatIclickedthepenultimatelinkandthetextrepresentingthatlinkisuptherehowdoIgetmycontenttotracktabs.followthecode:

.tabs-below>.nav-tabs,
.tabs-right>.nav-tabs,
.tabs-left>.nav-tabs {
  border: 0;
}

.tab-content>.tab-pane,
.pill-content>.pill-pane {
  display: none;
}

.tab-content>.active,
.pill-content>.active {
  display: block;
}

.tabs-below>.nav-tabs {
  border: 0;
}

.tabs-below>.nav-tabs>li {
  margin-top: -1px;
  border: 0;
}

.tabs-below>.nav-tabs>li>a {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.tabs-below>.nav-tabs>li>a:hover,
.tabs-below>.nav-tabs>li>a:focus {
  border: 0;
}

.tabs-below>.nav-tabs>.active>a,
.tabs-below>.nav-tabs>.active>a:hover,
.tabs-below>.nav-tabs>.active>a:focus {
  border: 0;
}

.tabs-left>.nav-tabs>li,
.tabs-right>.nav-tabs>li {
  float: none;
}

.tabs-left>.nav-tabs>li>a,
.tabs-right>.nav-tabs>li>a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 0;
}

.tabs-left>.nav-tabs {
  float: left;
  border: 0;
}

.tabs-left>.nav-tabs>li>a {
  margin-right: -1px;
  padding: 1px 15px;
  text-transform: uppercase;
  font-style: italic;
  color: #919399;
}

.tabs-left>.nav-tabs>li>a:hover,
.tabs-left>.nav-tabs>li>a:focus {
  border: 1px solid #fff;
}

.tabs-left>.nav-tabs .active>a,
.tabs-left>.nav-tabs .active>a:hover,
.tabs-left>.nav-tabs .active>a:focus {
  border: 1px solid #fff;
  color: #f59c00;
  font-weight: bold;
  position: relative;
}

.tabs-left>.nav-tabs .active>a:after {
  content: '\f054 ';
  position: absolute;
  right: -11px;
  top: 0px;
  color: #f59c00;
  font-size: 15px;
  font-family: FontAwesome;
  font-style: normal;
}

.tabs-right>.nav-tabs {
  float: right;
  border: 0;
}

.nav-tabs>li>a:hover {
  background-color: transparent;
}

.tabs-right>.nav-tabs>li>a {
  margin-left: -1px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.tabs-right>.nav-tabs>li>a:hover,
.tabs-right>.nav-tabs>li>a:focus {
  border: 0;
}

.tabs-right>.nav-tabs .active>a,
.tabs-right>.nav-tabs .active>a:hover,
.tabs-right>.nav-tabs .active>a:focus {
  border: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tabbable tabs-left">
  <ul class="nav nav-tabs col-md-5">
    <li class="active"><a href="#01" data-toggle="tab">Relacionamento entre os empreendedores</a></li>
    <li><a href="#02" data-toggle="tab">Confidencialidade	</a></li>
    <li><a href="#03" data-toggle="tab">Constituição da Empresa</a></li>

    <li><a href="#04" data-toggle="tab">Registro da empresa</a></li>
    <li><a href="#05" data-toggle="tab">Gestão da Startup	</a></li>
    <li><a href="#06" data-toggle="tab">Tributário e Trabalhista</a></li>

    <li><a href="#07" data-toggle="tab">Captação e estruturação de investimentos</a></li>
    <li><a href="#08" data-toggle="tab">Propriedade Intelectual	</a></li>
    <li><a href="#09" data-toggle="tab">Tecnologia da Informação</a></li>
  </ul>
  <div class="tab-content col-md-7 ">
    <div class="tab-pane active" id="01">
      <p> Elaboração de Acordo de Confidencialidade para proteção da ideia do negócio e da tecnologia desenvolvidas em relação a terceiros, como parceiros, fornecedores, investidores etc..</p>
    </div>

    <div class="tab-pane" id="02">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="03">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="04">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="05">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="06">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="07">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="08">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>

    <div class="tab-pane" id="09">
      <p> Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
    </div>
  </div>
</div>
    
asked by anonymous 25.06.2018 / 17:11

0 answers