如何让 jQuery 根据 If/Then 语句更改类。单击另一个链接时，我的“主页”链接不会更改课程

Question

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

IF 'home page' active, THEN 'home link' 'CSS class: A' (color:dark green); ELSE 'home link' 'CSS class: B' (color:brown).

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

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

注意所有页面都在 jQuery 滑块上，因此所有“页面”实际上都在同一页面上（据我所知）。

当前代码：

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>

滑块的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()。据我了解，您还必须以$(document) 开头.on()，而不是要点击的东西。然后把那个东西放在参数里面。

另外，您正在尝试添加Class = "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 */
        }

Answer 2

我的第一个想法是最简单的。将no-hover 类添加到主页链接。