çöküşü i nav yan çubuğunda bir bağlantı için <code>data-toggle="collapse"</code> eklendi siderbar

çalışan ve bağlantı > tıklandığında başka sekmesi > olarak değişmelidir tıklandığında v, değiştirmek ancak çalışmıyor çöküşü işlevselliği gibi görünüyor olmalı değil . CSS i birisi Aşağıda çöküşü i nav yan çubuğunda bir bağlantı için <code>data-toggle="collapse"</code> eklendi siderbar

peşin

burada teşekkür sorunu bileceği Can, simgeleri değiştirmek için kod var kod parçacığı geçerli: -

<body> 
    <div class="container"> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
     <nav class="nav-sidebar"> 
     <ul class="nav tabs"> 
      <li class="active"><a href="#tab1" data-toggle="tab" data-toggle="collapse" data-target="#tab1">tab1</a></li> 
      <li class=""><a href="#tab2" data-toggle="tab" data-toggle="collapse" data-target="#tab2"> Tab2</a></li> 
      <li class=""><a href="#tab3" data-toggle="tab" data-toggle="collapse" data-target="#tab3"> Tab3</a></li> 
     </ul> 
     </nav> 
    </div> 
    <!-- tab content --> 
    <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content"> 
     <div class="tab-pane active text-style collapse in" id="tab1"> 
     <p> This is Tab1 content </p> 
     </div> 
     <div class="tab-pane text-style collapse" id="tab2"> 
     <p> This is Tab2 content </p> 
     </div> 
     <div class="tab-pane text-style collapse" id="tab3"> 
     <p> This is Tab3 content </p> 
     </div> 
    </div> 
    </div> 
</body>

css dosyasında

.nav-sidebar a:after { 
    font-family: 'Glyphicons Halflings'; 
    content: "\e114"; 
    float: right; 
    color: grey; 
} 

.nav-sidebar a.collapsed:after { 
    content: "\e080"; 
}

kaynak

2016-03-26 Shreyas Rastogi

bootstrap sürümünü kullanıyorsunuz ? – Yass

Bootstrap v3.3.6 –

Aşağıdaki cevaplardan herhangi biri yardımcı oldu mu? Aksi halde, lütfen bize bildirin ve neden olabilecek sorularınızı veya şüphelerinizi yanıtlamaktan memnuniyet duyarız. – Yass

A Burada birkaç şey var. Daraltmayı çizmeniz için önyüklemeyi kullanarak sekme kullanmanız gerekmez. Öyleyse, önyükleme sekmeleri olarak veri hedefini ve veri geçişini koymak zorunda kalmazsınız, sadece data-toggle="tab"'u kullanmanız gerekir ve bu sekmeyi href değeriyle değiştirirsiniz. Sonra da daraltma sınıfını sekme bölmelerinizden de kaldırabilirsiniz. Bu, bottap'ı tıkladığınızda bottap'ın aktif sınıfını değiştireceğini söyler, böylece içeriğinizden sonra içeriğinizi değiştirebilirsiniz. Yani o kadar gibi görünecektir: Burada

keman size değişiklikleri Fiddle

Revize Html gösteriyor:

<ul class="nav tabs"> 
<li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
<li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
<li><a data-toggle="tab" href="#tab3">Tab 3</a></li> 
</ul> 
</nav> 
</div> 
<!-- tab content --> 
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 tab-content"> 
<div class="tab-pane fade active in" id="tab1"> 
<p> This is Tab1 content </p> 
</div> 
<div class="tab-pane fade" id="tab2"> 
<p> This is Tab2 content </p>  
</div> 
<div class="tab-pane fade" id="tab3"> 
<p> This is Tab3 content </p> 
</div> 
</div> 
</div>

Revize Css:

.nav-sidebar a:after{ 
    content: "\e114"; 
    font-family: 'Glyphicons Halflings'; 
    color: grey; 
    float: right; 
} 
.nav-sidebar li.active a:after{ 
    content: "\e080"; 
}

kaynak

2016-03-26 18:19:29

çöküşü i nav yan çubuğunda bir bağlantı için <code>data-toggle="collapse"</code> eklendi siderbar

cevap

İlgili konular