CODEWITHSUNDEEP
jquerycssclassclick
Teon
Teon

Reputation: 37

Changing parent Div background color on active tab

I am trying to figure out how to change the parent div container background color when clicking a tab. I want to have it so that when a tab is active it adds a class to the parent div. Each active tab would add different bg color to the parent.

Link to the example

This is what I would like to do.

enter image description here

Upvotes: 0

Views: 1256

Answers (4)

ROSHAN SIDDIQUE
ROSHAN SIDDIQUE

Reputation: 1

$(document).on('click', 'ul>li', function() {
  $(".main").css("background", $(this).data("color"));
})
body {
  font: 13px Verdana;
}

.main {
  padding: 100px 0;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  justify-content: center;
}

ul li {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li data-color="red">red</li>
    <li data-color="blue">blue</li>
    <li data-color="cyan">cyan</li>
    <li data-color="yellow">yellow</li>
  </ul>
</div>

Upvotes: 0

Aswin Ramesh
Aswin Ramesh

Reputation: 1674

I tried it in your console, check this

var colors = ["red", "black", "yellow"];
jQuery(document).ready(function() {
  jQuery(".vc_tta-tabs-list > li").on("click", function() { 
    jQuery(".grve-section").css("background", colors[jQuery(this).index()])
  })
})

$ is not assigned in your code, that's why I changed to jQuery here

Upvotes: 1

saiz
saiz

Reputation: 25

add on-click event to every tab.

$(selector).click(function(){
 $(this).css("background", "red");
});

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

You can use a attribute data-color to each tab and then on click you can switch them

$(document).on('click', 'ul>li', function() {
  $(".main").css("background", $(this).data("color"));
})
body {
  font: 13px Verdana;
}

.main {
  padding: 100px 0;
}

ul {
  display: flex;
  padding: 0;
  list-style: none;
  justify-content: center;
}

ul li {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <ul>
    <li data-color="red">red</li>
    <li data-color="blue">blue</li>
    <li data-color="cyan">cyan</li>
    <li data-color="yellow">yellow</li>
  </ul>
</div>

Upvotes: 1

Related Questions