Как добавить активный стиль с помощью бутстрапа

Question

хороший день, я пытаюсь добавить активный стиль, чтобы указать текущую страницу в моем веб-приложении. Bt не смог получить решение, я посмотрел предыдущую запись и ответил, где я увидел это, говорили, что работало

<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> 

, когда я использовал атрибут данных тумблера в этом коде

<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> 

я не мог перенаправить на страницу, которая имеет атрибут данных тумблера, но сделал эту страницу активной ,

Answer 1

Вам необходимо добавить имя класса, действующее на ваш ли. Пример:

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

Answer 2

У меня уже была та же проблема. Пожалуйста, см. Мой код, и я думаю, что это поможет вам, если у вас есть какой-то вопрос, я готов ответить вам.

Вид:

  <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 - при необходимости поймать активную вкладку из URL и сделать его открытым

$(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 - Если вы хотите изменить URL при смене вкладки

//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'); 
    });