CODEWITHSUNDEEP
javascriptjquery
Davington III
Davington III

Reputation: 107

JS to make a div color change

Hi I've been writing some basic html + css to make a nav bar, I've decided to try and incorporate JS into the nav bar that would say "if 'test' is clicked go to 'test' page and keep the color change on the selected page" I was thinking about doing a switch or something but I'm not particularly sure how to do it. http://jsfiddle.net/3jp1d0fe/1/

html

<body>
    <div class="container">
    <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Design</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Build</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Test</a></div>
    <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>

</div>
</body>

CSS

div.container {
    display: table;
    display: table-row;
}

div.column { 
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;    

}

div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
}

div.column:hover {
    background-color: #a2884f;
}

Upvotes: 0

Views: 106

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

I guess you are looking for something like this:

  1. Create a class with the hover state.
  2. Add an event when you click on that to set the class.
  3. In each of your page, you need to add the current class to the .column, to make it stay active when you land on the page.

$(function () {
  $(".column a").click(function () {
    $(".current").removeClass("current");
    $(this).closest(".column").addClass("current");
    return false;
  });
  url = location.pathname.substr(1);
  $('a[href="' + url + '"]').closest(".column").addClass("current");
});
div.container {
  display: table;
  display: table-row;
}

div.column { 
  display: table-cell;
  vertical-align:middle;
  text-align:center;
  background-color:#c2ad80;    

}

div.column a {
  color:white;
  font-family: Arial;
  font-size: 12px;
  text-decoration:none;
  display:block;
  height:100px;
  width:100px;
  display: table-cell;
  vertical-align: middle;
}

div.column.current,
div.column:hover {
  background-color: #a2884f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Design</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Build</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Deploy</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Test</a></div>
  <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>
</div>

Fiddle: http://jsfiddle.net/3jp1d0fe/2/

Upvotes: 3

Ahmed Gamal
Ahmed Gamal

Reputation: 1696

you can change another element bg color just get the elment by id or class

function colorDiv() {
    var selection = document.getElementById('bgcolor').value;
    var div = document.getElementById('change');
    div.style.backgroundColor = 'green';
 
    document.getElementById("demo").innerHTML = selection;

    switch (selection) {
        case "1":
            div.style.backgroundColor = 'grey';
            break;
        case "2":
            div.style.backgroundColor = 'white';
            break;
        case "3":
            div.style.backgroundColor = 'blue';
            break;
        case "4":
            div.style.backgroundColor = 'cian';
            break;
        case "5":
            div.style.backgroundColor = 'green';
            break;
    }
}
<div id="change" style="height:20px; width:100%; position: absolute; float:bottom; background-color:#000000"></div>
<br>
<select name="bgcolor" id="bgcolor" onchange="colorDiv()">
    <option class="1" value=1>Grey</option>
    <option class="2" value=2>White</option>
    <option class="3" value=3>Blue</option>
    <option class="4" value=4>Cian</option>
    <option class="5" value=5>Green</option>
</select>
<br>
<br>
<p id="demo"></p>

Upvotes: 0

Related Questions