Активное меню с навигацией - PullRequest
Новая
       5

Активное меню с навигацией

0 голосов
/ 20 апреля 2020

Может кто-нибудь сказать, что именно добавить в этот код, чтобы выделить меню активированной страницы? Я видел много вещей в Интернете, но они не работали. 

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* CSS */
* {box-sizing: border-box}
body {
    margin-left: 15%;
    margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%; /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}


.navbar a:hover:not(.active) {
    background-color:  #AA0000;
    color: white;
}

.navbar a:hover {
   background-color: #AA0000;
   color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}   
</style>
</head>
<body>
<div class="navbar" id="Menu">
  <a href="/" class="active">Home</a>
  <a href="/about">About</a>
  <a href="/research">Research</a>
  <a href="/cv" class="right">CV</a>
  <a href="/blog" class="right">Blog</a>
</div><!-- Menu-->
</body>
</html>

Кажется, я должен добавить script. Могу ли я добавить script к этому коду или он должен быть в другом файле?

Это, например, то, что я добавляю к style контенту, но он не работает. 

<script>
$(document).ready(function() {
    $('#Menu .navbar a[href="' + this.location.pathname + '"]').parent().addClass('active');
});  
</script>

Ответы [ 3 ]

1 голос
/ 20 апреля 2020

Вот пример ванили JS. 

function detectLocation() {
  var path = window.location.pathname;
  console.log(path);
  var a = document.querySelector("#Menu .active");
  a.className = a.className.replace(/\active\b/g, "");
  var n = document.getElementById('Menu').getElementsByTagName("a");
  var i = 0;
  for (i; i < n.length; i++) {
    console.log(n[i]);
    if (n[i].getAttribute("href") == path) {
      console.log("Hit " + i);
      n[i].className = n[i].className + " active";
    }
  }
}

detectLocation();
* {
  box-sizing: border-box
}

body {
  margin-left: 15%;
  margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%;
  /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

.navbar a:hover:not(.active) {
  background-color: #AA0000;
  color: white;
}

.navbar a:hover {
  background-color: #AA0000;
  color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}
<div class="navbar" id="Menu">
  <a href="/" class="active">Home</a>
  <a href="/about">About</a>
  <a href="/research">Research</a>
  <a href="/js" class="test">Test</a>
  <a href="/blog" class="right">Blog</a>
</div>
1 голос
/ 20 апреля 2020

Вот динамический c способ сделать это с помощью тега body ID, чтобы установить класс на вашей активной странице.

  1. Сценарий получает элементы тегов, затем выполняет их итерацию через функцию, используя .each().
  2. Затем мы определяем значение текущего текущего итерированного элемента, используя var bodyId = и * 1008. *.
  3. Затем мы определяем значение идентификатора тегов тела, используя $('#' + val).attr('id');
  4. Запустите условное выражение, чтобы увидеть, совпадает ли значение текущего повторного идентификатора с установленным значением идентификатора тегов тела, если оно is, addClass('active').

ПРИМЕЧАНИЕ: Чтобы это работало, каждый тег тела страницы должен иметь тег ID, установленный на значение соответствующего тега A NAVS. , Это должно быть точно так же, чтобы это работало. Самое интересное, что все это происходит динамически, вам не понадобится код на каждой странице, если вы поместите его в связанный файл сценария JQuery.

Вам понадобится добавить эти идентификаторы в теги тела ваших страниц: 

<body id="Home">
<body id="About">
<body id="Home">
<body id="CV">
<body id="Blog">


$(document).ready(function() {  
  $(".navbar a").each(function(value) {
  var bodyId = $(this).text();
  var homeId= $('#' + bodyId).attr('id');
    if (bodyId === homeId) {
      console.log('To test this, Change --> '+ $(this).text() + ' --> Change this in the HTML <body id="' + $(this).text() + '">');
      $(this).addClass('active');
    }
  });
});
* {
  box-sizing: border-box
}

body {
  margin-left: 15%;
  margin-right: 15%;
}

.navbar {
  overflow: hidden;
  background-color: #104e8B;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: 1px solid #ccc;
  border-right: none;
}

.navbar a {
  float: left;
  padding: 6px;
  color: white;
  text-decoration: none;
  font-size: 15px;
  width: 20%;
  /* Five links of equal widths */
  text-align: center;
  border-left: 1px solid #fff;
  border-right: 1px solid #ccc;
}

.navbar a:hover:not(.active) {
  background-color: #AA0000;
  color: white;
}

.navbar a:hover {
  background-color: #AA0000;
  color: white;
}

.active {
  background-color: #10CCCC;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="CV">
  <div class="navbar" id="Menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Research</a>
    <a href="#" class="right">CV</a>
    <a href="#" class="right">Blog</a>
  </div>
  <!-- Menu-->
</body>
1 голос
/ 20 апреля 2020
  1. вам необходимо импортировать JQuery перед использованием его функции, связав его CDN.
  2. расположение идиоматического c кода javascript обычно находится в нижней части тег body

  3. с идентификатором для каждой из кнопок лучше, чем this.location.pathname, например, он не будет работать в jsfiddle, поскольку путь, генерируемый в jsfiddle, отличается от пути в HTML тег 

    <div class="navbar" id="Menu">
  <a id='home' href="/">Home</a>
  <a id='about' href="/about">About</a>
  <a id='research' href="/research">Research</a>
  <a id='cv' href="/cv" class="right">CV</a>
  <a id='blog' href="/blog" class="right">Blog</a>
</div><!-- Menu-->
</body>
<script>
$(document).ready(function() {
    $('#research').addClass('active');
});  
</script>

https://jsfiddle.net/skwn50dj/

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

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

...