Question

您好我已经编写了一些基本的html + css来制作导航栏，我决定尝试将JS合并到导航栏中，该导航栏会说“如果点击'测试'，请转到'测试'页面，保持所选页面的颜色变化“ 我正在考虑做一个转换或其他什么，但我不是特别确定如何做到这一点。 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;
}

Answer 1

我猜你正在寻找这样的东西：

使用悬停状态创建一个类。
点击该事件设置课程时添加活动。
在每个页面中，您需要将current课程添加到.column，以便在您登陆页面时保持有效。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

小提琴：http://jsfiddle.net/3jp1d0fe/2/

Answer 2

你可以改变另一个元素bg颜色，只需通过id或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>

JS使div颜色发生变化

2 个答案: