jQuery：根据 window.location.hash 为 DIV 分配类、"active"

这是我的第一个帖子。

我正在编写一个jQuery函数，该函数将背景图像(bgImage)分配给div (#title)，并且还赋予另一个div活动类，然后根据window.location.hash返回的内容在该活动div中褪色。#title的bgImage工作得很好，但是当我将div名称分配给后来给定活动类的变量时，所有div都被分配为活动类，而不仅仅是一个。结果，当我调用panelIn函数时，它们都消失了。下面是我的代码:

function logoChange() {
switch (window.location.hash) {
    case '#art':
        var bgImage = 'url(assets/logo__ART.svg)';
        var activeP = '#art';
        break;
    case '#about':
        var bgImage = 'url(assets/logo__ABOUT.svg)';
        var activeP = '#about';
        break;
    case '#contact':
        var bgImage = 'url(assets/logo__CONTACT.svg)';
        var activeP = '#contact';
        break;
    default:
        var bgImage = 'url(assets/logo__DESIGN.svg)';
        var activeP = '#design';
        break;
       };
console.log(window.location.hash);
$('#title').css('background-image', bgImage);
$(activeP).addClass('active');
};
function panelOut() {
    if (!$('.panel').hasClass('active')) {
        $('.panel').transition({opacity: 0});
    }
}
function panelIn() {
    if ($('.panel').hasClass('active')) {
        $('.panel').transition({opacity: 1});
    }
}

提前感谢。我是jQuery的新手，一直在学习。

更新:以下是相关的HTML代码。

<body>
    <!-- Header -->
        <div id="header">
            <div id="title"></div>
            <ul id="navigation" class="roboto">
                <li><a id="link-design" href="#design" data-hover="design">design</a></li>
                <li><a id="link-art" href="#art" data-hover="art">art</a></li>
                <li><a id="link-About" href="#about" data-hover="about">about</a></li>
                <li><a id="link-contact" href="#contact" data-hover="contact">contact</a></li>
            </ul>
        </div>
    <!-- Design -->
        <div id="design" class="panel">
            <p>Some Text.</p>
        </div>
    <!-- Art -->
        <div id="art" class="panel">
            <p>Some Text 2.</p>
        </div>
    <!-- About -->
        <div id="about" class="panel">
            <p>Some Text 3.</p>
        </div>
    <!-- Contact -->
        <div id="contact" class="panel">
            <p>Some text 4.</p>
        </div>
</body>

更新2:

这是新的jQuery代码，现在可以完美地工作了。

function pageChange() {
    $('.panel.active').removeClass('active');
    switch (window.location.hash) {
        case '#art':
            var bgImage = 'url(assets/logo__ART.svg)';
            var activeP = '#art';
            break;
        case '#about':
            var bgImage = 'url(assets/logo__ABOUT.svg)';
            var activeP = '#about';
            break;
        case '#contact':
            var bgImage = 'url(assets/logo__CONTACT.svg)';
            var activeP = '#contact';
            break;
        default:
            var bgImage = 'url(assets/logo__DESIGN.svg)';
            var activeP = '#design';
            break;
       };
console.log(window.location.hash, activeP);
$('#title').css('background-image', bgImage);
$(activeP).addClass('active');
};
function panelOut() {
    $('.panel.active').transition({opacity: 0});
}
function panelIn() {
    $('.panel.active').transition({opacity: 1});
}

你的函数应该是

function panelIn() {
    $('.panel.active').transition({opacity: 1});
}

对于panelOut也是一样

相关内容

最新更新

热门标签：