В настоящее время я пытаюсь добиться связывания двух классов nav-link (для двух отдельных, nav-ов. Один находится вверху, а другой внизу.) К одному классу div панели вкладок на странице с помощью Bootstrap но у меня есть некоторые проблемы и пытаюсь их исправить. В настоящее время он хорошо работает в первом навигационном меню, но во втором - только при первом начальном щелчке.
После этого я заметил некоторые вещи, которые хотел бы исправить: я переписал некоторые стили css для значения по умолчанию, активного , Bootstrap класс для первых ссылок меню навигации, но он не применяет их к первой ссылке меню, когда я нажимаю на вторую ссылку внизу, и я бы хотел, чтобы они это сделали. Во-вторых, вторая навигационная ссылка внизу показывает панель вкладок только один раз при нажатии, и я хотел бы, чтобы она отображалась несколькими щелчками.
Мне кажется, что обе эти проблемы связаны с одним и тем же исправлением, если честно так что я надеюсь, что это помогает при решении. Я пробовал много вещей, пытаясь это исправить, в том числе используя различные jquery фрагменты для отключения активного класса и все такое, но все же не повезло. Я не уверен, действительно ли мой css влияет на эту проблему, но я все равно вставлю его. Я действительно понятия не имею, что я делаю неправильно, и перепробовал много вещей, чтобы попытаться это исправить. Заранее спасибо!
ПРИМЕЧАНИЕ * Второе навигационное меню, о котором я говорю, находится под нижним колонтитулом с id = "foot-nav" на теге ul.
Мой HTML:
<div class="container-fluid">
<div class="row navigation">
<div class="col-8 d-flex nav-left">
<ul id="nav-container" class="nav nav-tabs">
<li class="nav-item nav-itemcontain">
<a class="nav-link active" data-toggle="tab" href="#about">About Me</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#services">Services</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#projects">Projects</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#contact">Contact 2</a>
</li>
</ul>
</div>
<div class="col d-flex nav-right">
hkgjvhj
</div>
</div>
<div class="row about-body">
<div class="col-8 about-changing">
<div class="tab-content">
<div id="about" class="container tab-pane active"><br>
...
</div>
<div id="services" class="container tab-pane fade"><br>
...
</div>
<div id="projects" class="container tab-pane fade"><br>
...
</div>
<div id="contact" class="container tab-pane contact-tab fade"><br>
<h3>Contactrtgtr</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col about-fixed">wrgeyrg</div>
</div>
<div class="row footer">
<div class="col d-flex foot-copyright">© Blah Blah 2020 - All Rights Reserved.</div>
<div class="col d-flex foot-contact mh-100">
<ul id="foot-nav" class="nav">
<li class="nav-item underline">
<a class="nav-link" data-toggle="tab" href="#contact">Begin Your Project</a>
</li>
</ul>
</div>
<div class="col d-flex justify-content-end foot-social-media">
<ul class="nav">
<li class="nav-item"><a href="#" class="fa fa-linkedin"></a></li>
<li class="nav-item"><a href="#" class="fa fa-youtube"></a></li>
<li class="nav-item"><a href="#" class="fa fa-instagram"></a></li>
<li class="nav-item"><a href="#" class="fa fa-snapchat-ghost"></a></li>
</ul>
</div>
</div>
</div>
Мой CSS:
.navigation {
height:70px;
}
#nav-container {
border-bottom: 2.5px solid transparent;
}
#nav-container .nav-link {
border-bottom:2.5px solid #ffd633;
border-right: none;
border-left: none;
border-top: none;
border-color: #ffd633;
}
#nav-container .nav-link, #nav-container .nav-link:visited {
margin-bottom: 0px;
color: white;
transition: 1s;
border-bottom: 2.5px solid transparent;
}
#nav-container .nav-link:hover, #nav-container .nav-link:focus {
border-color: #ffd633;
border-right: none;
border-left: none;
border-top: none;
text-decoration: none;
}
#nav-container .active, #nav-container .active, #nav-container .active:hover {
background: none;
border-bottom: 2.5px solid #ffd633;
border-color: #ffd633;
}
#nav-container .nav-link.active {
border-bottom: 2.5px solid #ffd633;
}
.about-body {
height:470px;
}
.footer {
height:70px;
}
.footer .col {
height: 100%;
}
.foot-contact {
align-items: center;
justify-content: center;
font-size: 30px;
}
.underline {
display: inline-block;
height: 100%;
}
.underline:after {
content: '';
width: 0px;
height: 5px;
display: block;
background: #ffd633;
border-radius: 2px;
transition: 0.5s;
}
.underline:hover:after {
width: 100%;
}
.foot-contact a, .foot-contact a:visited, .foot-contact a:hover {
color: white;
font-weight: 600;
text-decoration: none;
letter-spacing: 1px;
}
.foot-contact a:hover {
opacity:.85;
}
Мои ссылки:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/><!-- Add icon library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Latest compiled JavaScript -->