Question

我想将导航栏中的活动菜单选项卡更改为紫色，将非活动选项卡更改为绿色。链接到小提琴https://jsfiddle.net/jtsrwcu9/1/

上的代码

#include <random>
#include <iostream>

int main() {
  std::random_device seed;
  std::mt19937 gen{seed()}; // seed the generator
  std::uniform_int_distribution<int> dist;

  dist.param({47, 89}); // set min and max
  int guess = dist(gen); // generate number
  std::cout << “Computer guess: “ << guess << ‘\n’;
}

我还希望搜索栏中的占位符根据标签更改

Answer 1

我这样做的方式是

我将从没有.selected类的绿色按钮开始，然后在单击它时添加它。

这可以很容易地在JS中完成...

如果要使用jQuery，请查看此reference page ... 其他看看如何使用onclick="function()"事件调用函数。

在点击add the class时单击。

编辑：我已经按照OP的要求创建了一个JSFiddle soloution。（对不起，HTML中的JavaScript，我是JSfiddle XD的菜鸟）

<!-- Here is the buttons, I've gave the button I want to be selected on page first, here. That is done by giving it the selected class.-->

<button id="btn1" class="selected" onclick="click1()">First</button>
<button id="btn2" onclick="click2()">Second</button>

<!-- I've put the script in the HTML because I'm a JS Fiddle Noob -->
<script>
  // The buttons are saved into a Var so it can be referenced later.
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");

  // This what happens when clicked on the FIRST button
  function click1() {
    btn1.classList.add("selected"); // give the selected class
    btn2.classList.remove("selected"); // take away the selected class
  }

  // This what happens when clicked on the SECOND button
  function click2() {
    btn2.classList.add("selected"); // give the selected class
    btn1.classList.remove("selected"); // take away the selected class
  }
</script>

如何更改菜单选项卡html的活动颜色？

1 个答案: