Навигационные вкладки Bootstrap не переключают и не отображают контент! [Electron.js] [Bootstrap] - PullRequest
Новая
       50

Навигационные вкладки Bootstrap не переключают и не отображают контент! [Electron.js] [Bootstrap]

0 голосов
/ 23 декабря 2019

Не могу понять, почему

  1. При нажатии вкладки не переключаются
  2. На вкладках не отображается содержимое

IЯ использую электрон и бутстрап, я был бы признателен, если бы у кого-то были какие-либо рекомендации или решения. Я прочитал несколько других подобных вопросов, однако не нашел ответа (насколько я знаю). Фрагмент предоставлен. Спасибо 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="app-corners">

         <div class="menu-bar">

          <ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
            </li>
          </ul>

          
         </div>


         <div id="container-fluid">
  
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="1">

            </div>

            <div class="tab-pane fade" id="2" >
                          <h1>HELLO</h1>


            </div>

            <div class="tab-pane fade" id="3" >
              <h1>HELLO</h1>


            </div>

            <div class="tab-pane fade" id="4" >
              
                <h1>HELLO</h1>

            </div>
          </div>
            </div>
         </div>

Ответы [ 4 ]

1 голос
/ 23 декабря 2019

Надеюсь, эта поможет вам, пожалуйста, добавьте эту ссылку только в заголовок. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 23 декабря 2019

Все, что мне нужно было сделать, это обновить версию начальной загрузки в шапке. Спасибо за чтение.

0 голосов
/ 23 декабря 2019

Попробуйте: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="menu-bar">
  <ul class="nav nav-tabs"  style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
    <li class="active"><a id="1-tab" data-toggle="tab" href="#1">1</a></li>
    <li><a href="#" data-toggle="tab" data-target="#2">2</a></li>
    <li><a href="#" data-toggle="tab" data-target="#3">3</a></li>
    <li><a href="#" data-toggle="tab" data-target="#2">4</a></li>
  </ul>
  </div>
  <br>
  <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="1">
            </div>

            <div class="tab-pane fade" id="2" >
                          <h1>HELLO</h1>


            </div>

            <div class="tab-pane fade" id="3" >
              <h1>Hello</h1>


            </div>

            <div class="tab-pane fade" id="4" >
              
                <h1>HELLO</h1>

            </div>
            </div>
</div>

</body>
</html>
0 голосов
/ 23 декабря 2019

Поскольку вы не использовали файлы начальной загрузки js. Ваш код работает нормально. Проверьте здесь 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 <div class="app-corners">

         <div class="menu-bar">

          <ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
            </li>
          </ul>

          
         </div>


         <div id="container-fluid">
  
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="1">

            </div>

            <div class="tab-pane fade" id="2" >
                          <h1>HELLO</h1>


            </div>

            <div class="tab-pane fade" id="3" >
              <h1>HELLO</h1>


            </div>

            <div class="tab-pane fade" id="4" >
              
                <h1>HELLO</h1>

            </div>
          </div>
            </div>
         </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...