0

我有一个 about 部分，为了便于阅读，我将其拆分为多个由 JavaScript 加载的部分。我希望侧面导航具有不同的背景颜色，如果它既悬停在上面并且是选定的，并且还具有每个选项的唯一颜色的边框。我的工作没有问题，但我只是想知道是否有比我目前的方式更有效的方法来做到这一点。

简而言之，HTML：

<nav>   
            <p id="bout" onclick="bout()">About Us</p>
            <p id="mish" onclick="mish()">Our Mission</p>
            <p id="team" onclick="team()">The Team</p>
            <p id="how" onclick="how()">How It Works</p>
            <p id="poli" onclick="poli()">Policies</p>
        </nav>

        <div class="actual">

            <div id="about">
            <h2>About Us</h2>
            <p>We are a conglomerate of hoodlums.</p>
            </div>

        </div><!-- end actual -->

和 JS：

function bout() {
    document.getElementById("about").innerHTML= '<h2>About Us</h2><p>We are a conglomerate of hoodlums.</p>';
    document.getElementById("bout").style.borderRight='3px solid red';
    document.getElementById("mish").style.borderRight='none';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='ghostwhite';
    document.getElementById("mish").style.backgroundColor='bisque';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';

}

function mish() {
    document.getElementById("about").innerHTML = '<h2>Mission</h2><p>Our mission is to rid the world of dust bunnies.</p>';
    document.getElementById("bout").style.borderRight='none';
    document.getElementById("mish").style.borderRight='3px solid orange';
    document.getElementById("team").style.borderRight='none';
    document.getElementById("how").style.borderRight='none';
    document.getElementById("poli").style.borderRight='none';

    document.getElementById("bout").style.backgroundColor='bisque';
    document.getElementById("mish").style.backgroundColor='ghostwhite';
    document.getElementById("team").style.backgroundColor='bisque';
    document.getElementById("how").style.backgroundColor='bisque';
    document.getElementById("poli").style.backgroundColor='bisque';
}

如您所见，单击时必须显式关闭每种样式上的一个非常麻烦。不过，主要的关键是让每个边界右为不同的颜色。

这是整个事情的 jsfiddle，但由于某种原因，它实际上并没有承认 JS：http: //jsfiddle.net/4CrhD/

附加随机问题：是否可以使用加载的内容与 about 不同的内容链接到此页面，例如，我可以使用加载的“mish()”而不是 HTML 中的内容链接到此页面吗？

4

3 回答 3

1

最好的方法是使用 CSS。添加删除父元素上的类并让 CSS 应用正确的规则。

body.mish #bout{
   border-right : 3px solid red,
}

body.bout #bout{
   border-right : 3px solid blue,
}
于 2013-07-18T15:14:22.863 回答
1

是的。您需要在 html 和样式之间进行划分。使用CSS！

然后您可以更改样式，例如使用jQuery.css()：

$('#mish').css({
   'border-right':    '3px solid orange',
   'background-color':'ghostwhite'
});

当然，您可以在类中定义样式。一个类使用一个类描述所有元素的样式定义。

nav > p {
    border-right: none;
    background-color: bisque;
}

.active {
    border-right: 3px solid red;
    background-color: ghostwhite;
}

如果单击按钮，您可以动态添加和删除类：

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')
});

因为代码重复很糟糕（而且我不喜欢设置完整的 innerHTML），所以您可以创建一个动态页面，例如：

pages = {
   'bout': {
       'id':       'about',
       'headline': 'About Us',
       'body':     'We are a conglomerate of hoodlums.'
    }
}

将上面的代码扩展为

$('nav > p').click(function() {
   $('nav > p').removeClass('active');
   $(this).addClass('active')

   if (pages[$(this).attr('id')]) {
       var page = pages[$(this).attr('id')];
       $('.actual').first().empty();
       var container = $('<div>', { 'id': page.id });
       container.append($('<h2>', { 'html': page.headline })); 
       container.append($('<p>', { 'html': page.body })); 
       $('.actual').first().append(container);
   }
});

看看这个jsfiddle的工作示例

解决您的“随机”问题

附加随机问题：是否可以使用加载的内容与 about 不同的内容链接到此页面，例如，我可以使用加载的“mish()”而不是 HTML 中的内容链接到此页面吗？

如果您想拥有指向此页面的链接，您可以解析window.location.hash对象并使用page.html#mish.

为了设置默认的“页面”，我们扩展我们的pages对象以提供这样的信息：http: //jsfiddle.net/Eu36g/6/

于 2013-07-18T15:16:17.630 回答
0

在 CSS 中定义您的类：bout、mish、about、poli ... 对于每一个都放置您想要的 CSS。之后，在 javascript 中，您只需更改元素的类（添加类或更改类，或其他），新的 CSS 将适用

例子

document.getElementById("bout").className = "otherclass"
于 2013-07-18T15:14:25.777 回答