Пытался создать вкладки на Bootstrap 4, первая вкладка не перестаёт висеть даже при переключении, остальные вкладки при переключении дальше сдвигаются на одну строку ниже, и к тому же вкладки не переключаются на предидущие... Пытался найти ответ на эти кучку вопросов - не нашел. (Может и плохо искал)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="menu.js"></script>
<title>App</title>
</head>
<body>
<!-- .container центрирует блок и устанавливает его ширину в зависимости от контрольных точек разрешения монитора -->
<div class="container header-block">
<div class="text"><p class="title">HELLO MY DARKNESS</p></div>
<nav class="menu">
<ul>
<li id="menu1">Suicide
<ul class="sub-menu">
<li>submenu</li>
<li>submenu</li>
<li>submenu</li>
</ul>
</li>
<li>Outside</li>
<li>Home</li>
<li>Gun</li>
<li>Exit</li>
</ul>
</nav>
</div>
<div class="container" id="content-block-1">
<ul class="nav nav-tabs">
<li class="nav-item" data-toggle="tab" href="#page1">Main Page</li>
<li class="nav-item" data-toggle="tab" href="#page2">About Page</li>
<li class="nav-item" data-toggle="tab" href="#page3">Touba Page</li>
<li class="nav-item" data-toggle="tab" href="#page4">Niam Page</li>
<li class="nav-item" data-toggle="tab" href="#page5">Closed Page</li>
</ul>
</div>
<div class="tab-content container">
<div class="tab-pane fade show active" id="page1">
<p>The capybara (Hydrochoerus hydrochaeris) is a giant cavy rodent native to South America.</p>
<div/>
<div class="tab-pane fade" id="page2">
<p>dfhdfgjdfhjdrth<p/>
</div>
<div class="tab-pane fade" id="page3">
<p>3423t523452345234<p/>
</div>
<div class="tab-pane fade" id="page4">
<p>23452345jghjhijhgg23452345<p/>
</div>
<div class="tab-pane fade" id="page5">
<p>1h1h1h1h1h1h1h1hh1h1h1h1h<p/>
</div>
</div>
</body>
</html>