Изменение содержимого вкладки с помощью навигационной панели со свернутой кнопкой - PullRequest
Новая
       12

Изменение содержимого вкладки с помощью навигационной панели со свернутой кнопкой

0 голосов
/ 05 февраля 2020

У меня две проблемы со сворачивающейся панелью навигации и некоторым содержимым, которое должно отображаться в соответствии с выбором:

1) Существует проблема с отображением правильного содержимого вкладки из-за выбора в панели навигации. Вкладки были показаны только один раз. Когда я снова выбираю кнопку «Монитор», ничего не меняется.

2) Как можно отобразить содержимое панели «Монитор» при запуске?

Вот мой html -код. Спасибо за вашу помощь. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://kit.fontawesome.com/bd579dd21a.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </head>

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"
    />
    <title>My Navbar</title>

<body>

 <nav class="navbar navbar-expand-sm navbar-dark bg-secondary">
        <a href="#" class="navbar-brand">Control center</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" data-target="#Monitor" aria-expanded="false" aria-controls="Monitor" href="#">Monitor</a>
                <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" data-target="#Configuration" aria-expanded="false" aria-controls="Configuration" href="#">Configuration</a>
                </li>
                <li class="nav-item">
                     <a class="nav-link" data-toggle="tab" data-target="#About" aria-expanded="false" aria-controls="About" href="#">About</a>
                </li>
            </ul>
        </div>
    </nav>

<div class="tab-content">
 <div id="Monitor" class="tab-pane fade in active">
  <h3>Monitor</h3>
     <p>Values of the monitor.</p>
 </div>
 <div id="Configuration" class="tab-pane fade">
  <p>Values of the configuration.</p>
 </div>

 <div id="About" class="tab-pane fade">
  <p>About my life.</p>
 </div>
</div>

</body>

</html>

1 Ответ

0 голосов
/ 06 февраля 2020

Мне удалось сделать это самостоятельно. Я пропустил дополнительный «nav-объект» в строке 35.

Вот рабочий код: 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://kit.fontawesome.com/bd579dd21a.js" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </head>

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"
    />
    <title>My Navbar</title>

<body>

 <nav class="navbar navbar-expand-sm navbar-dark bg-secondary">
     <a href="#" class="navbar-brand">Control center</a>
     <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMenu" role="tablist">
         <ul class="nav navbar-nav">
             <li class="nav-item">
                  <a class="nav-link" id="Monitor-tab" data-toggle="tab" data-target="#Monitor" href="#Monitor" role="tab" aria-expanded="false" aria-controls="Monitor"  >Monitor</a>
             <li class="nav-item">
                 <a class="nav-link" id="Configuration-tab" data-toggle="tab" data-target="#Configuration" href="#Configuration" aria-expanded="false" aria-controls="Configuration">Configuration</a>
             </li>
             <li class="nav-item">
                 <a class="nav-link" id="About-tab" data-toggle="tab" data-target="#About" href="#About" aria-expanded="false" aria-controls="About">About</a>
             </li>
         </ul>
     </div>
 </nav>

<div class="tab-content">
 <div id="Monitor" class="tab-pane fade show active" role="tabpanel" aria-labelledby="Monitor-tab">
  <h3>Monitor</h3>
     <p>Values of the monitor.</p>
 </div>
 <div id="Configuration" class="tab-pane fade" role="tabpanel" aria-labelledby="Configuration-tab">
  <p>Values of the configuration.</p>
 </div>

 <div id="About" class="tab-pane fade" role="tabpanel" aria-labelledby="About-tab">
  <p>About my life.</p>
 </div>
</div>

</body>

</html>
...