jquery - 我如何让 jQuery 根据 If/Then 语句更改类。单击另一个链接时，我的 'home' 链接不会更改类

Question

如何让我的 jQuery 代码声明以下内容:

如果“主页”处于事件状态，则“主页链接”“CSS 类:A”(颜色:深绿色)； ELSE 'home link' 'CSS class: B' (color:brown).

(最终:为了表明我在哪个页面上，我希望相关链接是“深绿色”且没有悬停效果；对于那些不活动的链接，我希望它们是棕色的并且我希望它们在悬停时变成浅绿色。)

目前，我的代码完全按照我想要的方式工作，除了一件事 - 当我点击任何链接时，深绿色不会从“主页”链接中消失。这是因为 CSS:#menuDisplayedHome a { color: #568a38;/* 深绿色 * } .... 请参阅:https://jsfiddle.net/mhfn7kw0/2/embedded/result/ (按“关于”，然后按“主页”以查看 slider )。

注意所有页面都在 jQuery slider 上，因此所有“页面”实际上都在同一页面上(据我所知)。

当前代码:

CSS:

#menuDisplayed a {
        text-decoration:none;
        color: #8F5C3E;    /* Brown */
        }

    #menuDisplayed a:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */
        color:#6bab4a ;   /* Light Green */
        }

    #menuDisplayedHome a  {
        color: #568a38; /* Dark Green */
        }   

    #menuDisplayed a.no-hover {
        color: #568a38;       /* Dark Green */
        }

HTML:

<div id="wrapper">

    <div id="headingLogoBar">
        <div id="logoBarImageDiv">
            <img id=""/>
        </div>

        <div id="menuDisplayed">
                <ul>
                    <li id="menuDisplayedHome"><a href="#target1" class="forMovingPanel">HOME</li>
                    <li id="menuDisplayedAbout"><a href="#target2" class="forMovingPanel">ABOUT</a></li>        
                    <li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingPanel">PORTFOLIO</a></li>    
                    <li id="menuDisplayedContact"><a href="#target4" class="forMovingPanel">CONTACT</a></li>
                </ul>
        </div>
    </div>

    <div class="forMovingPanel active" id="target1" style="left:0; display:block;">
        <h3 style="text-align:center">Home</h3>
    </div>


    <div class="forMovingPanel" id="target2">
            <h3 style="text-align:center">About</h3>
    </div>

    <div class="forMovingPanel" id="target3" >
        <h3 style="text-align:center">Portfolio</h3>
    </div>

    <div class="forMovingPanel" id="target4" >
        <h3 style="text-align:center">Contact</h3>
    </div>

</div>

用于更改链接颜色的 jQuery:

<script>

$('#menuDisplayedHome a').on('click', function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    });

$('#menuDisplayedAbout a').on('click', function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover');
    $('#menuDisplayedHome a').addClass('menuDisplayed a');
    });

$('#menuDisplayedContact a').on('click', function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').addClass('menuDisplayed a');
    });

$('#menuDisplayedPortfolio a').on('click', function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').addClass('menuDisplayed a');
    });

</script>

slider 的 jQuery:

        jQuery(function($) {

$('a.forMovingPanel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if ($(".forMovingPanel").is(':animated')) return false;

    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: $this.width()
            }, 500);
        });

        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
});

});

Answer 1

我先说，我会使用 .click()属性代替 .on() .据我了解，你必须开始 .on()与 $(document)也，而不是要点击的东西。然后把那个东西放在参数中。

此外，您正在尝试 addClass = "menuDisplayed a"。那不是一个类:menuDisplayed是您调用的 ID。如果我是你，我会把我的一些 ID 改成类，并稍微整理一下；请记住，ID 比类更具体。

在我看来，最好开始你所有的<a>同一类中的标签(或没有 no-hover 类)。然后当$(document)是.ready() ，您可以告诉 jQuery 在没有单击或其他事件的情况下自动将 HOME 加载为深绿色。就在页面完成加载时。我会为这样的类重写 jQuery:

$(document).ready(function(){
$('#menuDisplayedHome a').addClass('no-hover');

$('#menuDisplayedHome a').click(function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    });

$('#menuDisplayedAbout a').click(function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover');
    });

$('#menuDisplayedContact a').click(function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    $('#menuDisplayedPortfolio a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover'); 
    });

$('#menuDisplayedPortfolio a').click(function() {      /* when you click the div */
    $(this).addClass('no-hover');     /* add the class 'no-hover' = dark green */
    $('#menuDisplayedAbout a').removeClass('no-hover'); 
    $('#menuDisplayedContact a').removeClass('no-hover'); 
    $('#menuDisplayedHome a').removeClass('no-hover'); 
    });
});

和我生成的 CSS:

.menuDisplayed a {
        text-decoration:none;
        color: #8F5C3E;    /* Brown */
        }

.menuDisplayed a:not(.no-hover):hover { /* only apply hover styling when the div does not have the class 'no-hover' */
        color:#6bab4a ;   /* Light Green */
        }

    .menuDisplayed a.no-hover  {
        color: #568a38; /* Dark Green */
        }