Как изменить активный класс на ListItem с помощью JQuery - PullRequest
Новая
       8

Как изменить активный класс на ListItem с помощью JQuery

0 голосов
/ 30 января 2012

см. Демонстрацию ниже:
http://www.templateaccess.com/demos/walkin/
я купил этот шаблон и действительно не смог найти способ, как работает активный класс в menu_nav li?
что menu_nav html похож на этот: 

  <div class="menu_nav">
    <ul>
      <li class="active"><a href="index-2.html"><span>Home</span></a></li>
      <li><a href="blog.html"><span>Blog</span></a></li>
      <li><a href="support.html"><span>Support</span></a></li>
      <li><a href="about.html"><span>About Us</span></a></li>
      <li><a href="contact.html"><span>Contact Us</span></a></li>
    </ul>
  </div>

и это css: 

/* menu */
.menu_nav { margin:0; padding:50px 0 0; float:right; width:auto; height:43px;}
.menu_nav ul { list-style:none; padding:0; height:43px;}
.menu_nav ul li { margin:0; padding:0 0 0 2px; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:0 0 0 20px; font-size:16px; line-height:19px; font-weight:normal; color:#fff; text-decoration:none; text-transform:none; text-align:center;}
.menu_nav ul li a span { display:block; padding:12px 20px 12px 0; height:19px;}
.menu_nav ul li.active a, .menu_nav ul li a:hover { color:#fff; background:url(images/menu_a_l.png) no-repeat left top;}
.menu_nav ul li.active a span, .menu_nav ul li a:hover span { background:url(images/menu_a_r.png) no-repeat right top;}

, как вы видите, существует класс с именем 'active', который перемещается, щелкая каждое меню, и никогда не переходит в главное меню во время обратных передач.
здесь нет jquery или javascript.
как это работает?
в моем asp.net, что активный класс не работает, поэтому я добавлю jquery ниже: 

<script type="text/javascript">
    $(function () {
        $('.menu_nav ul li').click(function () { $(this).addClass('active'); alert('a'); });
    }); 
</script>

но во время обратной передачи я теряю активный класс на выбранном предмете.
есть идеи?

Ответы [ 3 ]

1 голос
/ 30 января 2012

Этот класс active устанавливается вручную на каждой странице для пунктов меню.Таким образом, вам не нужен JavaScript для его установки, если вы не используете AJAX, чтобы получить новую страницу и отобразить ее.

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

1 голос
/ 30 января 2012

Вы добавляете класс .active в client-side, поэтому, как только ваша страница заполнится postback, все воссоздается в server-side. Если вы хотите предотвратить это, используйте UpdatePanel и обновляйте только содержимое страницы (оставляя навигационное меню без изменений).

1 голос
/ 30 января 2012

HTML: 

<div class="menu_nav">
  <ul>
    <li class="index-2"><a href="index-2.html"><span>Home</span></a></li>
    <li class="blog"><a href="blog.html"><span>Blog</span></a></li>
    <li class="support"><a href="support.html"><span>Support</span></a></li>
    <li class="about"><a href="about.html"><span>About Us</span></a></li>
    <li class="contact"><a href="contact.html"><span>Contact Us</span></a></li>
  </ul>
</div>

jQuery: 

$(function() {
    var location = window.location.href,
    nav = $('.menu_nav');
    $('li', nav).each(function() {
        var index = location.indexOf($(this).prop('class'));
        if (index != -1) {
            $(this).addClass('active');
            return false;
        }
    });
});
...