Question

我有一个关于部分的内容，我将其分成多个由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/

其他随机问题：是否可以使用加载的内容链接到此页面，例如，我是否可以使用“mish（）”链接到此页面而不是HTML中的内容？

Answer 1

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

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

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

Answer 2

<击>是。你需要在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以获取工作示例

解决“随机”问题

其他随机问题：是否可以使用加载的内容链接到此页面，例如，我是否可以使用“mish（）”链接到此页面而不是HTML中的内容？

如果您希望链接指向此页面，则可以解析window.location.hash对象并链接page.html#mish等链接。

要设置默认“页面”，我们会扩展pages对象以提供此类信息：http://jsfiddle.net/Eu36g/6/

Answer 3

在CSS中定义你的类：bout，mish，about，poli ...为每个人放置你想要的CSS。在那之后，在javascript中，你只需要更改元素的类（添加类或更改类，或者其他），并且将应用新的CSS

例如

document.getElementById("bout").className = "otherclass"

使用Javascript更有效地改变样式的方法？

3 个答案: