Ссылки на вкладки начальной загрузки не работают

#javascript #jquery #twitter-bootstrap

Вопрос:

Мои вкладки не работают, все в порядке. Ссылки не работают должным образом, пожалуйста, помогите. я пробую все методы, но бесполезно.Я пробую CDN, затем также локальный файл

     <!DOCTYPE html>
    <html lang="en">
    <head>

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="container">

    <ul class="nav nav-stacked nav-justified">
        <li class="active"><a href="#C" data-toggle="tabs">C#</a></li>
        <li><a href="#home" data-toggle="tabs">Home</a></li>
        <li><a href="" data-toggle="tabs">jQuery</a></li>
        <li><a href="" data-toggle="tabs">PHP</a></li>
    </ul>

        <div class="tab-content">
            <div class="tab-pane fade in active" id="C">
                <p>C# IS DEVELOPED BY MICROSOFT CORP IN 2000</p>
            </div>

            <div class="tab-pane fade" id="home">
                <p>This is HOME</p>
            </div>

        </div>


    </div>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

1. Вы не включили файл bootstrap js, только css.

2. @razethestray я подключаю каждый отдельный файл, но по-прежнему ничего не происходит

3. Вам нужно запустить некоторые JS, чтобы активировать их в соответствии с документами… getbootstrap.com/javascript/#tabs

Ответ №1:

Вам необходимо включить файл jquery для запуска начальной загрузки, т.е https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js . Вам не нужно добавлять какой-либо другой код jquery. А также переключение данных будет вкладкой, а не «вкладками».

     <ul class="nav nav-tab">
        <li class="active"><a href="#C" data-toggle="tab">C#</a></li>
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#" data-toggle="tab">jQuery</a></li>
        <li><a href="#" data-toggle="tab">PHP</a></li>
    </ul>

Ответ №2:

Вам необходимо включить файл bootstrap js, затем также присвоить вашему меню идентификатор и добавить обработчик кликов для обработки переключения вкладок, например:

 $('#myTab a').click(function (e) {
	 e.preventDefault();
	 $(this).tab('show');
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container"> 
  <ul id="myTab" class="nav nav-stacked nav-justified">
    <li class="active"><a href="#C" data-toggle="tabs">C#</a></li>
    <li><a href="#home" data-toggle="tabs">Home</a></li>
    <li><a href="" data-toggle="tabs">jQuery</a></li>
    <li><a href="" data-toggle="tabs">PHP</a></li>
  </ul> 
  <div class="tab-content">
    <div class="tab-pane fade in active" id="C">
      <p>C# IS DEVELOPED BY MICROSOFT CORP IN 2000</p>
    </div> 
    <div class="tab-pane fade" id="home">
      <p>This is HOME</p>
    </div> 
  </div> 
</div>