2
\$\begingroup\$

I am currently changing the background colour of a sidebar each time a menu item is clicked using the following code:

$( 'a[href = "#masthead"' ).click(function() {
  $('#sidebar').css('background-color', '#3b6dac');
});

$( 'a[href = "#section2"' ).click(function() {
  $('#sidebar').css('background-color', '#23d4d7');
});

$( 'a[href = "#section3"' ).click(function() {
  $('#sidebar').css('background-color', '#59d078');
});

It does what I want, but I am relatively new to JavaScript and jQuery, and I imagine there is likely to be a better way...

jsFiddle

\$\endgroup\$
2
  • \$\begingroup\$ Are you open to changing the html? \$\endgroup\$
    – RobH
    Feb 6, 2015 at 10:43
  • \$\begingroup\$ Yes certainly if it makes things cleaner. \$\endgroup\$
    – Sam
    Feb 9, 2015 at 4:33

1 Answer 1

2
\$\begingroup\$

You can do something like this:

<ul class="list-unstyled main-nav">
  <li><a href="#masthead" data-bg-color="blue">Masthead</a>
  <li><a href="#section2" data-bg-color="pink">Section 2</a>
  <li><a href="#section3" data-bg-color="orange">Section 3</a>
</ul>

and js:

$( 'a[data-bg-color]' ).click(function() {
  $('#sidebar').css('background-color', $(this).attr("data-bg-color"));
});

or if you cannot change html:

$( '.main-nav a' ).click(function() {

    var color = "blue"; //default;

    switch($(this).attr("href")) {
        case '#masthead' : color = "blue"; break;
        case '#section2' : color = "pink"; break;
        case '#section3' : color = "orange"; break;
    }
    $('#sidebar').css('background-color', color);
});

Improved solution

If you can do the first option but if you don't like to write in HTML the color of background (according to best practice, the style should be inside css), then you can use the same approach but using the class to add on sidebar.

For example:

<li><a href="#masthead" data-sidebar-class="master">Masthead</a>
<li><a href="#section2" data-sidebar-class="section2">Section 2</a>
<li><a href="#section3" data-sidebar-class="section3">Section 3</a>

and js:

$( 'a[data-sidebar-class]' ).click(function() {

    // http://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
    $('#sidebar').removeClass(function (index, css) {
        return (css.match (/(^|\s)sidebar-\S+/g) || []).join(' ');
    }).addClass("sidebar-"+$(this).attr("data-sidebar-class"));

});

and css:

.sidebar-master { background-color: blue }
.sidebar-section2 { background-color: pink }
.sidebar-section3 { background-color: orange }

demo: http://jsfiddle.net/9vtxutth/1/

\$\endgroup\$
3
  • \$\begingroup\$ Are you saying that it is best practice to include background colour in the HTML, or are you saying that it is best practice to not include background colour in the HTML? \$\endgroup\$
    – Sam
    Feb 9, 2015 at 4:37
  • \$\begingroup\$ I means that all the styles should be inside css. \$\endgroup\$ Feb 9, 2015 at 9:52
  • \$\begingroup\$ Great; that is what I was thinking too. Thanks for your response, I haven't marked it as the accepted answer because I haven't had a chance yet to figure it all out yet. \$\endgroup\$
    – Sam
    Feb 12, 2015 at 23:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.