выделить активный элемент на основе активной страницы

Я искал похожие вопросы, но ни один из них не работал, поэтому я здесь прошу вас о помощи. Я хочу:выделить активный элемент на основе активной страницы

Когда кто-то посещает «про», лития станет активным, так что css будет применяться. Когда он нажимает на «сервис» такой же, как и выше будет происходить и т.д.

Примечание 1: это меню вызывается в основном корпусе с require_once («путь/к/navmenu.php»), и я не знаю, что это влияет на что-либо.

Примечание 2: Я знаю, что ключ jQuery здесь, но я пробовал некоторый код в stackoverflow из похожих вопросов, и никто не работал. JSfiddle ценится

HTML КОД:

<nav class="flexy-menu"> 
    <li class="active"><a href="index.php">home</a><div class="menu-space"></div></li> 
    <li><a href="about-us-style1.php">about</a><div class="menu-space"></div></li> 
    <li><a href="service-style2.php">service</a><div class="menu-space"></div></li> 
</nav>

CSS КОД:

.flexy-menu li:hover > a, 
.flexy-menu li.active a { 
    background: #c68f50; 
    color: #fff; 
}

источник

2015-05-28 El G

некоторые вариации этого может помочь -http: //stackoverflow.com/questions/9755751/how-to-style-a-link-that-matches-the-current-url –

даже это может help только с помощью CSS https://css-tricks.com/attribute-selectors/ –

Вы используете PHP, поэтому вы можете просто определить переменную PHP в начале каждой страницы, например. для о странице:

$about_page = 1;

и тогда вы могли бы выделить в меню точку, если пользователь находится на этой конкретной страницы:

<li><a href="about-us-style1.php" class="<?php if($about_page == 1) { echo 'highlighted'; } ?>">about</a><div class="menu-space"></div></li>

И не забудьте объявить класс highlighted в CSS:

.highlighted { 
    background: #c68f50; 
    color: #fff; 
}

просто идея - может быть более продвинутым решением

источник

2015-05-28 12:57:42

Ahh, я вижу, да. попробуем его и вернемся с результатами –

Я буду здесь! :-) –

@ElG: Это сработало? –

Ну, если вы Перенаправление пользователя на другую страницу, то вам нужно сделать на стороне сервера код для проверки текущей страницы и применения соответствующего класса для связи.

Но если вы не перенаправляете, то дайте мне знать. Я добавлю код для него.

// Server Side Code

<?php 
    $page_name = str_replace('.php', '', $_SERVER['PHP_SELF']); 

    $page_array = array(
      'index'=>'', 
      'about'=>'' 
    ); 
    $page_array[$page_name] = 'active'; 
?><html> 
    <head> 
     <title>Active Menu</title> 
    </head> 
    <body> 
     <nav> 
      <a href="#" class="<?php echo $page_array['index']?>">Home</a> 
      <a href="#" class="<?php echo $page_array['about']?>">About</a> 
     </nav> 
    </body> 
</html>

p.s .: Я сохранил это очень просто, чтобы вы поняли основную концепцию того, что мы пытаемся достичь. Это может быть улучшено во многих отношениях, но для начинающих парней это может быть хорошей помощью, с чего начать.

источник

2015-05-28 12:42:05 Avinash

Это не значит, что они «нужны» для выполнения кода на стороне сервера, и это не ответ на его вопрос, а не полностью. –

@ TheWarlock, на самом деле он хочет перенаправить страницу, так что единственный способ - сделать код на стороне сервера, чтобы применить класс к соответствующей ссылке. Именно поэтому этот подход был опубликован. – Avinash

как насчет общего кода js, присутствующего на всех страницах, которые могут оценить его на основе на URL и некоторые подготовленные данные? –

Как вы перенаправляете пользователя. Вам нужно проверить имя страницы и выделить элемент li, который имеет привязку с таким же значением, как href после того, как страница будет готова. Следующий фрагмент может помочь.

$(document).ready(function() { 
    var pagename = location.pathname.split('/').slice(-1)[0]; 
    $(".flexy-menu li a").each(function (index) { 
     if($(this).attr("href").indexOf(pagename)==0){ 
      $(this).parent().addClass("active"); 
     } 
     else{ 
      $(this).parent().removeClass("active"); 
     } 
    }); 
});

Вот полный фрагмент.сохранить это как HTML файл с именем test2.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script> 
    <style type='text/css'> 
    .flexy-menu li:hover > a, .flexy-menu li.active a { 
     background: #c68f50; 
     color: #fff; 
    } 
    </style> 



<script type='text/javascript'> 
$(document).ready(function() { 
    var pagename = location.pathname.split('/').slice(-1)[0]; 
    $(".flexy-menu li a").each(function (index) { 
     if($(this).attr("href").indexOf(pagename)==0){ 
      $(this).parent().addClass("active"); 
     } 
     else{ 
      $(this).parent().removeClass("active"); 
     } 
    }); 
}); 
</script> 


</head> 
<body> 
    <nav class="flexy-menu"> 
    <li class="active"><a href="index.php">home</a> 

     <div class="menu-space"></div> 
    </li> 
    <li><a href="test2.html">about</a> 

     <div class="menu-space"></div> 
    </li> 
    <li><a href="service-style2.php">service</a> 

     <div class="menu-space"></div> 
    </li> 
</nav> 
</body> 
</html>

Уведомление в HTML первый li оказывает активное active класс. но в браузере, если будет выделена вторая ссылка (если вы сохраните файл как test2.html)

источник

2015-05-28 13:07:03

Спасибо за фрагмент! Добавлю его в свой список фрагментов :) –

Хорошо, я был бы признателен, если бы вы сделали это на PHP, поскольку у вас есть отдельный файл для NavBar и его хорошая практика. С JQuery может быть достигнуто следующим образом:

function setMenu() 
{ 
    var chk = false; 
    $(".flexy-menu li").removeClass('active').each(function() 
    { 
     if(chk == false && window.location.href.indexOf($(this).find('a').attr('href')) != -1) 
     { 
      $(this).addClass('active');chk = true; 
     } 
    });  
}

Вы можете позвонить в любое время после setMenu(); отображается меню. Лучше назвать это в функции $(document).ready().

источник

2015-05-28 13:12:22

это не будет работать как ссылка привязки, не имеет атрибута 'src' –

Теперь это будет ??? –

Да, это будет работать сейчас. –

Хорошо привет снова. Я просматриваю все ваши комментарии и ответы. Все, что вы упомянули, делает трюк, чтобы быть честным. Но поскольку я не знаком с JS/Jquery и CSS3-селекторами, я пошел на php-путь :)

Итак, что он сделал: добавлена переменная на каждой странице, например $ about_page = 1; например. когда кто-то посещает индексную страницу. Затем в файле navigation.php я сделал некоторое утверждение if, которое эхо-класс «активный». (

<li <?php if($about_page==1){echo 'class="active"';}?>><a href="about-us-style1.php">about</a><div class="menu-space"></div> 
      </li>

источник

2015-05-28 13:25:52

выделить активный элемент на основе активной страницы

ответ

Смежные вопросы