javascript - 如何更改菜单选项卡 html 的事件颜色？

Question

我想将导航栏中的事件菜单选项卡更改为紫色，将非事件选项卡更改为绿色。链接到 fiddle 上的代码 https://jsfiddle.net/jtsrwcu9/1/

        <div class="search-tab-content">
            <div class="search-bar">
                <input type="text" id="search-text" placeholder="Search Catalog" name="qu">
                <input type="image" alt="go" id="search-text-icon" title="Search" src="img.png">
            </div>
        </div>

我还希望搜索栏中的占位符根据选项卡更改

Answer 1

我这样做的方式是，

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

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

如果你想使用jQuery，看看这个reference page ... 否则看看使用 onclick="function()" 调用函数事件。

然后 add the class当它被点击时。

编辑:我创建了一个 JSFiddle soloution根据OP的要求。 (请原谅 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>