1

サイトのメニュー用にこのコードを作成しました。問題は、単純化できると確信していることです。

スイッチとか使えるか分からない、Jquery初心者なだけで…。

$(document).ready(function() {

/* Effet hover sur onglet Accueil */
$("#menu-top li a.accueil").mouseover(function() {

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("rightactive");
            $(this).addClass("righthover");
    }

    $("#menu-top li a.accueil")}).mouseout(function(){

    if (($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }

    }); 

/* Effet hover sur onglet Entreprise */
$("#menu-top li a.entreprise").mouseover(function() {

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active")))  {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.entreprise")}).mouseout(function(){

    if (($("#menu-top li a.entreprise").is(".active")) || ($("#menu-top li a.realisations").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.services").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
            $(this).removeClass("lefthover");
            $(this).addClass("leftactive");
    }

    });

/* Effet hover sur onglet Services */
$("#menu-top li a.services").mouseover(function() {

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).addClass("righthover");
        $(this).removeClass("rightactive");

    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.services")}).mouseout(function(){

    if (($("#menu-top li a.services").is(".active")) || ($("#menu-top li a.accueil").is(".active"))) {
            return false;

    } else if ($("#menu-top li a.realisations").is(".active")) {
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");

    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });

/* Effet hover sur onglet Réalisations */
$("#menu-top li a.realisations").mouseover(function() {

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
            $(this).removeClass("leftactive");
            $(this).addClass("lefthover");
    }

    $("#menu-top li a.realisations")}).mouseout(function(){

    if (($("#menu-top li a.realisations").is(".active")) || ($("#menu-top li a.accueil").is(".active")) || ($("#menu-top li a.entreprise").is(".active"))) {
            return false;
    } else {
        $(this).removeClass("lefthover");
        $(this).addClass("leftactive");
    }


    });
    });

それは私のhtmlです

<nav id="menu-top">
     <ul>
        <li><a href="index.php" class="accueil active">Accueil</a></li>
        <li><a href="entreprise.php" class="entreprise leftactive">Entreprise</a></li>
        <li><a href="services.php" class="services">Services</a></li>
        <li><a href="realisations.php" class="realisations">Réalisations</a></li>
     </ul>
    </nav>

これに関するヘルプは大歓迎です。

ありがとう。

4

1 に答える 1

1

タグを次のように変更することをお勧めします。

<a href="index.php" data-link="accueil" class="active">Accueil</a>

JavaScript では、rels と呼ばれるハッシュ テーブルを使用して、すべての複雑な依存関係をリンク間に配置できます。

;(function(){
    var rels = {
        'entreprise': ['entreprise', 'realisations'],
        'services': ['services', 'realisations'],
        ...
    }

    function checkRels(link){
        var other = rels[link];
        for(var i = 0; i < other.length; i++){
            if($('#menu-top li a[data-link="' + other[i] + '"]').is('.active')){
                return false;
            }
        }
        return true;
    }

    $("#menu-top li a").mouseover(function() {
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("rightactive");
        $(this).addClass("righthover");
    }).mouseout(function(){
        var link = $(this).attr('data-link');
        if(!checkRels(link))return false;
        $(this).removeClass("righthover");
        $(this).addClass("rightactive");
    }); 
}())

依存関係を変更したり、さらに追加したい場合は、多くのコードを変更する代わりに、rels を調整するだけで済みます。

于 2011-06-29T08:06:13.050 に答える