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>