如何让 jQuery 根据 If/Then 语句更改 classes。当另一个 link 单击时，我的 'home' link 不会更改 class

Question

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

IF 'home page' 激活，THEN 'home link' 'CSS class: A'（颜色：深绿色）； ELSE 'home link' 'CSS class: B'（颜色：棕色）。

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

目前，我的代码完全按照我想要的方式工作，除了一件事 - 当我点击任何 link 时，深绿色不会从 'home' link。这是因为 CSS: #menuDisplayedHome a { color: #568a38; /* 深绿色 * } .... 请参阅：https://jsfiddle.net/mhfn7kw0/2/embedded/result/（按 'about'，然后按 'home' 以查看滑块）。

N.b。所有页面都在 jQuery 滑块上，因此所有 'pages' 实际上都在同一页面上（据我所知）。

当前代码：

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 用于更改 link 颜色：

<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

我的第一个想法是最简单的。添加 no-hover class 到主页 link.

Answer 2

我先说，我会使用 .click() 属性而不是 .on()。据我了解，您还必须以 $(document) 开始 .on()，而不是要单击的内容。然后把那个东西放在参数里面。

此外，您正在尝试添加类 = "menuDisplayed a"。那不是 class：menuDisplayed 是您调用的 ID。如果我是你，我会将我的一些 ID 更改为 classes 并稍微整理一下；请记住，ID 比 classes.

更具体

在我看来，最好将所有 <a> 标签都放在同一个 class 中（或者不用 no-hover class）。然后当 $(document) 为 .ready() 时，您可以告诉 jQuery 在没有点击或其他事件的情况下自动将 HOME 加载为深绿色。就在页面完成加载时。我会像这样为 classes 重写 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 */
        }

如何让 jQuery 根据 If/Then 语句更改 classes。当另一个 link 单击时，我的 'home' link 不会更改 class

How do I get jQuery to change classes according to an If/Then statement. My 'home' link will not change class when another link clicked on

css

jquery

function

click

hyperlink