More efficient way to change styles using Javascript?

Question

I have an about section, where I've split it up into multiple sections loaded by JavaScript for easier reading. I'd like the side navigation for this to have a different background color if it is both hovered over and if it is the one selected, and ALSO to have a border right with a unique color for each option. I have it working with no problems, but I'm just wondering if there is a more efficient way to do this than the way I currently am.

In a nutshell, the 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 -->

And the 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';
}

As you can see, it's quite cumbersome to have to explicitly turn off an on each style when clicked. The main key though is to have each border-right be a different color.

Here is a jsfiddle with the whole thing, but for some reason it's not actually acknowledging the JS: http://jsfiddle.net/4CrhD/

Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?

Answer 1

Yes. You need to divide between html and styling. Use CSS!

Then you can change styles e.g. with jQuery.css():

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

Of course you can define styles in a class. A class describes the styling definition for all elements using a class.

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

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

If a button is clicked you can dynamically add and remove a classes with:

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

Because code duplication is bad (and I don't like to set the full innerHTML), you can create a dynamic page like:

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

Extend the above code to

$('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);
   }
}); 

Have look at this jsfiddle for a working example

---

Addressing your "random" question

Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?

If you want to have links pointing to this page you can parse the window.location.hash object and link with links like page.html#mish.

---

To set default a "page" we extend our pages object to provide such a information: http://jsfiddle.net/Eu36g/6/

Answer 2

Define your classes in the CSS : bout, mish, about, poli ... For each one put the CSS you want. After that, in the javascript, you just have to change the class of the element (add class or change class, or whatever) and the new CSS will apply

example

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

Answer 3

The best way would be to use CSS. Add remove a class on a parent element and have the CSS apply the right rules.

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

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