CODEWITHSUNDEEP
javascripthtmlcss
anon001
anon001

Reputation: 15

How do I change the active color of menu tab html?

I want to change the active menu tab in navbar to be purple and inactive tab to green. link to code on 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>

I also want the placeholder in the search bar to change according to the tab

Upvotes: 0

Views: 86

Answers (1)

Josh Cooper
Josh Cooper

Reputation: 48

The way I would do this is,

I would start with a green button without the .selected class, then I would add that when it's been clicked.

This can be done in JS really easily...

If you want to use jQuery, look at this reference page... Else look at calling a function using the onclick="function()" event.

Then add the class when it has been clicked.

EDIT: I've created a JSFiddle soloution as requested by OP. (Excuse the JavaScript in the HTML, I'm a noob at 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>

Upvotes: 1

Related Questions