Добавить класс в меню <li>и затем щелкнуть ссылку с помощью jquery? - PullRequest
Новая
       10

Добавить класс в меню <li>и затем щелкнуть ссылку с помощью jquery?

0 голосов
/ 04 июля 2011

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

edit: добавляет класс li. но когда я нажимаю, он ничего не делает

Html 

<div id="nav"> 
 <nav>
   <ul class="topmenu">
    <li><a href="home.aspx">Home</a></li>
    <li><a href="about.aspx">About</a></li>
    <li><a href="contact.aspx">Contact</a></li>
   </ul>
 </nav>
</div>

JQuery: 

<script type="text/javascript">
    $(function () {
        $('.topmenu a:link').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('ul').children('li').removeClass('selected');
            $this.parent().addClass('selected');
        });
    });

</script>

Мне нужно, чтобы он щелкнул ссылку после того, как ей был назначен класс «выбранный», странно, потому что ручной щелчок не работает?

CSS: 

#nav 
{
    width: 100%;
    height: 30px;
}
nav a.current
{
    display: block;
    margin: auto;
    width: 950px;
}
nav ul
{
    list-style: none outside none;
    margin: 8px 0 0;
}
nav li
{
    float: left;
    height: 45px;
    left: -45px;
    position: relative;
    top: -16px;
    z-index: 2000;
}

nav li a {
    color: #FFFFFF;
    text-decoration: none;
}

nav a:link, nav a:visited, nav a:active
{
    display: block;
    float: left;
    font-size: 14pt;
    font-weight: normal;
    height: 33px;
    padding: 11px 17px 0;

}
nav li:hover, .home-link a, .current_page_item a:link, .current_page_item a:visited, a.children_openend, .topmenu li.selected a
{
    background: url("images/dc/menu-selected.png") repeat-x scroll 0 0 transparent !important;
    color: #FFFFFF;
}



nav a:hover
{
    color: #FFFFFF;
}

Ответы [ 4 ]

1 голос
/ 04 июля 2011

Ваш код делает то, что вы говорите: e.preventDefault(); внутри обработчика событий предотвращает поведение по умолчанию для этого события.

1 голос
/ 04 июля 2011

Это потому, что вы используете e.preventDefault();, который отключил стандартное поведение <a>.

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

Вы можете использовать это вместо: 

$('.topmenu a[href]').click(function (e) {

РЕДАКТИРОВАТЬ:

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

Если вы просто пытаетесь стилизовать ссылку для текущей страницы, дайте этопопытка: 

var page = window.location.pathname.split('/').pop();

$('a[href$="' + page + '"]').parent().addClass('selected');

Когда страница загрузится, она получит последний элемент в pathname из window.location и объединит его в селектор, чтобы выбрать элемент <a> для этой страницы.

1 голос
/ 04 июля 2011

Ммм.Если вы хотите, чтобы ссылка была «нажата», вы должны удалить следующую строку: 

e.preventDefault();

Но ссылка перейдет на страницу, указанную в href, не знаюэто ты хочешь.

Надеюсь, это поможет.Приветствия

1 голос
/ 04 июля 2011

Вы можете инициировать щелчок вручную, используя 

.trigger("click");

Так что после того, как вы выполните 

addClass("selected");

Просто пометьте триггер () в конце вызова: 

addClass("selected").trigger("click");

Редактировать:

Вместо этого вы можете просто вручную перенаправить браузер: 

addClass("selected");
window.location.href = $this.attr("href");

.trigger () не будет работать, так как вы запускаете его на сервере.не а.Приношу свои извинения.

Снова отредактируйте:

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

<li class="home-link">....</li>

И на каждой странице добавьте идентификатор в тег body: 

<body id="home-page">

Затем вы можете сделатьВаш стиль для выбранного в данный момент li, используя: 

#home-page .home-link {}

Помогает ли это?

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

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

...