Система ссылок Jquery Hashtag (показать, на какой странице находится пользователь)

Question

Система ссылок Jquery Hashtag (показать, на какой странице находится пользователь)

0

У меня есть работающая система ссылок на хэштаг, и я в основном хочу стилизовать <li> чтобы сообщить пользователю, на какой странице они используются background и color. Когда вы нажмете на другой элемент списка, jQuery обновит предыдущую страницу <li> CSS до нормального состояния.

Как я могу это достичь?

Код jQuery:

function Init(){
 ShowPage ('#body_home');
}

 function ShowPage(a){
  $(a).css("display","block");
 }

 $(document).ready(function(){
   $("a").click(function(e){
       if(window.location.href!= 'index.php'){
        window.location.href== 'index.php';
      }else{
        noop();
      }
      $(".page").fadeOut(1000).delay(1500);
      $("#" + $(this).data("page")).fadeIn(1000); e.preventDefault(); return       false;
   });
});

Код HTML:

<ul class="navlist">
    <li><a href="index.php">Home</a></li>
    <li><a href="hello.php">Hello</a></li>
</ul>

Julian 22 март 2014, в 00:12

Источник

0

Итак ... какой у тебя вопрос? "Как я могу достичь этого?" не подходит
Bojangles 21 март 2014, в 23:29
0

@ Bojangles Я спрашиваю, как сделать, чтобы пункт меню текущей страницы выделился, когда он активен.
Julian 21 март 2014, в 23:58

Теги:

javascript

jquery

html

css

hashtag

1 ответ

Ещё вопросы

Итак ... какой у тебя вопрос? "Как я могу достичь этого?" не подходит
@ Bojangles Я спрашиваю, как сделать, чтобы пункт меню текущей страницы выделился, когда он активен.

John · Accepted Answer · 2014-03-21T21-37-00.000Z

Я упростил этот ответ, чтобы настроить конкретное поведение, которое, как я думаю, вы ищете, но вы должны быть в состоянии реализовать его для своего конкретного случая.

Я хотел бы создать класс и назовите его .selected или .active, и назначить стиль, который вы хотите его. Например:

.selected {
    background: #f4a;
    color: #fff;
}

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

$('a').click( function() {
    $('a').not(this).removeClass('selected');
    $(this).addClass('selected');
});

Было бы немного сложнее ориентировать родительский li, но решение было бы таким же.

Здесь скрипка демонстрирует это решение.