Я пытался создать простую привязку навигации. Однако текстовая кнопка не активна при нажатии на нее и при прокрутке страницы, кнопка не перемещается в соответствии с соответствующим разделом и все еще активна на главной странице (кнопка). Файл CSS и встроенный стиль также не работают должным образом. Возможно, некоторые jquery-файлы, которые я использую, прерывают созданный мной CSS. Извините, я совсем новичок в этом деле.
HTML
<nav class="navbar-menu">
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#section1">Home</a></li>
<li class="dropdown-holder"><a xhref="#section2">none</a>
<ul class="sub-menu">
<li><a href="section2">Section 2</a></li>
</ul>
</li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
CSS
<style type="text/css">
a:hover {background: #bd202e !important;}
a:active {background: #bd202e !important;}
a:visited {background: #bd202e !important;}
a:focus {background: #bd202e !important;}
</style>
Скрипт
<script>
$('.navbar-menu.nav navbar-nav li').click(function(e) {
var $this = $(this);
$this.siblings().removeClass('active');
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
</script>
ВотСценарий, который я использовал:
1. <script type="text/javascript" src="vendor/bootstrap/bootstrap.min.js"></script> --> This script is for the main header slider
2. <script src="css/assets/bootstrap/js/bootstrap.min.js"></script>--> This script is for the gallery slider
Обратите внимание, что я попробовал две версии jQuery и не могу определить проблему. Если я удаляю jQuery-файл № 2, якорь активной & hover работает. Но я не хотел удалять файл jQuery № 2, потому что он мне нужен для моего слайдера галереи.
Пожалуйста, просите вашей помощи.