Wie man aktiven Stil mit Bootstrap

Question

hinzufügen Guten Tag, ich versuche, einen aktiven Stil hinzuzufügen, um die aktuelle Seite auf meiner Web-App anzuzeigen bt konnte keine Lösung bekommen, schaute ich vorheriger Beitrag und Antworten, wo ich das gesehen habe wurde gesagt,

<ul class="nav"> 
<li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li> 
<li><a data-target="#" data-toggle="pill" href="#users">Users</a></li><br/> 
</ul> 

gearbeitet haben, wenn ich

<ul class="nav nav-tabs"> 
      <li class="colour">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li> 
      <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li> 
      <li class="colour">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li> 
      <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li> 
      <li class="colour">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li> 
      <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li> 
     </ul> 

die Daten-Toggle-Attribut in diesem Code verwendet wird, könnte ich nicht auf die Seite umgeleitet, die die Daten-Toggle-Attribut hat aber die Seite aktiv gemacht .

Answer 1

Sie müssen Ihrem Li einen aktiven Klassennamen hinzufügen. Beispiel:

<li class="active"><a data-target="#" data-toggle="pill" href="#users">Users</a></li> 

Answer 2

Ich habe bereits das gleiche Problem gemacht. Bitte sehen Sie meinen Code und ich denke, es hilft Ihnen, wenn Sie eine Frage haben, bin ich bereit, Ihnen zu antworten.

Ausblick:

  <ul class="nav nav-tabs" id="myTab"> 
       <li id="activeTab" class="active"><a data-toggle="tab" href="#active">Active</a></li> 
       <li id="currentTab" class=""><a data-toggle="tab" href="#current">Current</a></li> 
       <li id="completedTab" class=""><a data-toggle="tab" href="#completed">Completed</a></li> 
      </ul> 
      <div class="tab-content" id="myTabContent"> 
       <div id="active" class="tab-pane fade active in"> 
        @Html.Action("Active", "Home") 
       </div> 
       <div id="current" class="tab-pane fade"> 
        @Html.Action("Current", "Home") 
       </div> 
       <div id="completed" class="tab-pane fade in"> 
        @Html.Action("Completed","Home") 
       </div> 
      </div> 

JavaScript - wenn Bedarf Aktive Registerkarte URL zu fangen und es

$(document).ready(function() { 
     var tab = @ViewBag.tabId; 
     switch (tab) { 
     case 1: 
      removeAllActiveTabs(); 
      $('#activeTab').addClass('active'); 
      $('#active').addClass('active'); 
      $('#active').addClass('in'); 
      break; 
     case 2: 
      removeAllActiveTabs(); 
      $('#currentTab').addClass('active'); 
      $('#current').addClass('active'); 
      $('#current').addClass('in'); 
      break; 
     case 3: 
      removeAllActiveTabs(); 
      $('#completedTab').addClass('active'); 
      $('#completed').addClass('active'); 
      $('#completed').addClass('in'); 
      break; 
     default: 
      $('#activeTab').addClass('active'); 
      $('#active').addClass('active'); 
      $('#active').addClass('in'); 
      break; 
     } 
    }); 

    function removeAllActiveTabs() { 
     $('#myTab').each(function() { 
      $(this).find('li').removeClass('active'); 
     }); 
     $('#myTabContent').each(function() { 
      $(this).find('div').removeClass('active'); 
      $(this).find('div').removeClass('in'); 
     }); 
    } 

JavaScript öffnen machen - Wenn Sie URL, wenn Tab Änderung ändern möchten

//When Client click on Tabs show in URL 
    $('#activeTab').on('click',function() { 
     window.history.pushState('','','/Home/SomeAction?tabId=1'); 
    }); 
    $('#currentTab').on('click',function() { 
     window.history.pushState('','','/Home/SomeAction?tabId=2'); 
    }); 
    $('#completedTab').on('click',function() { 
     window.history.pushState('','','/Home/SomeAction?tabId=3'); 
    });