меню с: hover, click, изменение класса и ajax - PullRequest
Новая
       35

меню с: hover, click, изменение класса и ajax

0 голосов
/ 07 июня 2010

Последний свернутый код, надеюсь, он кому-нибудь поможет: 

    $("#menu").find("a").hover(function(){
    $(this).addClass("active");
},function(){
    $(this).not(".clicking").not(".selected").removeClass("active");
});
$("#menu").find("a").click(function(){
    var $this = $(this);
    $("#ajaxP").fadeIn("fast");
    $("#normalcontent").hide("fast").load($this.attr("href") +" #normalcontent","",function(){
        $("#normalcontent").slideDown("slow");
    });
    $("#primarycontainer").hide("fast").load($this.attr("href") +" #primarycontainer","",function(){
        $("#primarycontainer").slideDown("slow");
        $("#ajaxP").fadeOut("fast");
    })
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});

Редактировать: Спасибо за ответы, он работает сейчас.Я добавил дополнительный класс «selected» (который не имеет ничего в css) и написал соответствующий код.Вот новый код.Как я могу минимизировать> этот код?

Вот оно: http://cebrax.freesitespace.net/new/

    <div id="menu">
    <ul>
        <li><a href="index.php" id="homeLink">home</a></li>
        <li><a href="#">news</a></li>
        <li><a id="test" href="#"  class="active selected">blog</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">about</a></li>
        <li><a href="contact.php" id="contactLink">contact</a></li>
                    <li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
    </ul>
</div>

И jQuery: 

$("#menu").find("a").hover(function(){
    $(this).addClass("active");
},function(){
    $(this).not(".clicking").not(".selected").removeClass("active");
});
$('#homeLink').click(function(){
    var $this = $(this);
    $("#ajaxP").fadeIn("slow");
    $("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
    $("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
    $("#ajaxP").fadeOut("normal");
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});
$('#contactLink').click(function(){
    var $this = $(this);
    $("#ajaxP").fadeIn("slow");
    $("#normalcontent").hide("slow").load("contact.php #normalcontent").slideDown("slow");
    $("#primarycontainer").hide("slow").load("contact.php #primarycontainer").slideDown("slow");
    $("#ajaxP").fadeOut("normal");
    $this.closest('ul').find('a').removeClass('active clicking selected');
    $this.addClass('active clicking selected');
    return false;
});

Привет!Я создал меню, которое добавляет класс «активный» при наведении курсора к каждому li и удаляет класс> при наведении курсора, кроме тех, которые уже имеют класс «активный».Пока это сделано.Однако у меня есть еще один .click () для каждого li, который загружает контент в> где-нибудь с ajax.Проблема начинается здесь, когда я нажимаю, я хочу добавить класс «активный»> к элементу, по которому щелкнули, и удалить класс из всех.Я добавляю класс, но li, который имел> класс «активный» до щелчка, не становится «активным» при наведении, я думаю, что «активный»> класс не удаляется из него?Кто-нибудь может помочь? 

    <div id="menu">
    <ul>
        <li><a href="index.php" id="homeLink">home</a></li>
        <li><a href="#">news</a></li>
        <li><a id="test" href="#"  class="active">blog</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">about</a></li>
        <li><a href="contact.php" id="contactLink">contact</a></li>
                    <li id="ajaxP" style="display:none"><img alt="loading" style="border:none;" src="images/ajax-loader.gif"/></li>
    </ul>
</div>

Вот jquery: 

     $("#menu").find("a").not(".active").each(function(){
    $(this).hover(function(){
        alert($(this));
        $(this).addClass("active");
    },function(){
       $(this).not(".clicking").removeClass("active");
    });
    });
 $("#homeLink").click(function(){
     var myThis=$(this);
     $("#ajaxP").fadeIn("slow");
     $("#normalcontent").hide("slow").load("index.php #normalcontent").slideDown("slow");
     $("#primarycontainer").hide("slow").load("index.php #primarycontainer").slideDown("slow");
     $("#ajaxP").fadeOut("normal");
     $("#menu").find("a").each(function(){
         $(this).unbind('mouseover').unbind("mouseout");
         $(this).removeClass("active clicking");
     });
     myThis.addClass("active clicking");
     return false;
 });

Ответы [ 2 ]

0 голосов
/ 07 июня 2010

Лучше, если вы разместите более краткие вопросы. Если я понял ваш вопрос, то это потому, что функция $("#menu").... привязывается к каждому элементу при первой загрузке страницы, и когда «блог» становится активным при загрузке страницы, она не привязывается к функции. Попробуйте 

$("#menu").find("a").each(function(){
$(this).hover(function(){
    if (!($(this).hasClass("selected")){
        alert($(this));
        $(this).addClass("active");
    }
},function(){
   $(this).not(".clicking").removeClass("active");
});
});

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

0 голосов
/ 07 июня 2010

Вы должны вернуться к чертежной доске для этого куска кода. Прежде всего, вам не нужно .each() для упакованных наборов, так как jQuery уже делает это для вас. 

$("#menu").find("a").not(".active").hover(...);

просто отлично.

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

$('#menu').find('a').bind('click', function(){
   var $this = $(this);

   $this.closest('ul').find('a').removeClass('active');
   $this.addClass('active');       
});
...