Можно ли задать класс элемента после его объявления?

Я хотел бы иметь все пункты меню, которые являются общими для всех страниц моего сайта в одном файле заголовка. Проблема заключается в том, что мне нужно определить класс для текущего пункта меню, чтобы он менял цвет. I`m с помощью Superfish для меню, здесь очень простой макет ...Можно ли задать класс элемента после его объявления?

<nav> 
    <ul class="sf-menu"> 
    <li id="first-li"><a href="index.php">Home</a></li> 
     <li class="current"><a href="page1.php">Page 1</a> 
     <ul> 
      <li><a href="submenu1.php">Submenu 1</a> </li> 
      <li><a href="submenu2.php">Submenu 2</a> 
       <ul> 
       <li><a href="subsubmenu1.php">SUBSubmenu 1</a> </li> 
       </ul> 
      </li> 
      </ul> 

     </li> 
     <li><a href="page2.php">Page 2</a> </li> 
     <li><a href="page3.php">Page 3</a></li> 
     <li><a href="page4.php">Page 4</a></li> 
    </ul> 
</nav>

Можно ли удалить класс = «ток», переместить всю СЧА в файл заголовка, а затем только указать ток класс на каждой странице?

Мой фактический код меню намного больше, и поэтому я не хочу, чтобы он повторялся на каждой странице.

источник

2013-04-06 Xperplay

Это действительно неясно, что вы хотите делать, и когда вы хотите это сделать. Это на сервере? Клиент? Что вы понимаете, переместив навигацию в файл заголовка? – Oded

Изменение классов DOM и переключения, для этого вам нужен Javascript. –

@Удаленная сторона клиента, перемещая целое

в файл заголовка вместо того, чтобы иметь его на каждой странице. – Xperplay

Я получил его, работая именно так, как я хочу, объединив немного ответов.

Сначала я дал id`s всем 1-го пунктов меню уровня, те, которые я хочу особо, то на каждой странице я переместить текущий класс как так ...

<script> 
$(document).ready(function() { 
$(".sf-menu li").removeClass("current"); 
$("#menu2").addClass("current"); 
}); 
</script>

чистый, простой и работает без щелчка, спасибо всем, что ответили вам всем помогли.

источник

2013-04-06 12:48:38 Xperplay

использовать это в вашем текущем сценарии страницы

Использование JQuery для вещи ..

$('.sf-menu li a').click(function() { 
     $('.sf-menu li.current').removeClass('current'); 
     $(this).closest('li').addClass('current'); 
    });

найти скрипку здесь .. http://jsfiddle.net/VudYx/

источник

2013-04-06 10:41:55 sasi

+1 как у вас был нисходящий ни одного комментария. Просто, чтобы сообщить OP, этот ответ использует JS и jQuery –

не работает, также не думайте, что функция щелчка подходит, а что, если пользователь переходит непосредственно на страницу по URL-адресу? – Xperplay

@ user2107004 вы проверили в скрипке..использовать jQuery – sasi

Добавить класс = "ток" к индексу. php li в заголовке и просто используйте следующий код jQuery в заголовке.

$(document).ready(function() { 
var curUrl = window.location.pathname; 
curUrl=curUrl.replace(/\/$/, "");//support urls with or without trailing slash 
$(".sf-menu li").each(function(i) { 

if(($(this).children().length > 0) && ($(this).children(":first").attr("href").split('/').pop()==curUrl.split('/').pop())) 
{ 
$(".sf-menu li").removeClass("current"); 
$(this).addClass("current"); 
} 

}); 
})

источник

2013-04-06 11:10:18

Отредактировано для поддержки случая, когда доступ к главной странице осуществляется без использования index.php в URL-адресе. –

работает, но как заставить его работать для подменю? Мое меню имеет 3 уровня, отредактировало вопрос ... Мне нужно было бы добавить текущий класс только к первому уровню меню, даже если я нахожусь в подменю ... – Xperplay

, тогда вам было бы проще сделать это на стороне сервера. Сделайте некоторую переменную, которая идентифицирует текущую страницу, затем добавьте условие в каждый li, . Даже вышеупомянутое может быть изменено для поддержки вашего дела, но вам придется сделать это самостоятельно. Я сделал что-то подобное [здесь] (http://www.biketoursdirect.com/packing-for-a-bike-tour) в правом меню навигации, возьмите это как пример. –

Лично я бы достиг этого с помощью CSS.

Если каждый пункт меню <li> имеет свой собственный класс, и ваш <body> имеет уникальный идентификатор на страницу, вы можете стилизовать текущий элемент надлежащим образом, что:

<li class="navHome">Home</li> 
<li class="navAbout">About<li>

и ваш дом/около страницы есть тело тег таким образом, что: <body id="pgHome"> или <body id="pgAbout">

Затем вы можете непосредственно стиль пункта меню текущей страницы:

#pgHome .navHome, 
#pgAbout .navAbout 
{ 
// styles to highlight this item 
}

источник

2013-04-06 11:15:37

Можно ли задать класс элемента после его объявления?

ответ

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