Alter the div's color when it is clicked by the user

Question

Alter the div's color when it is clicked by the user

When a user clicks on any of the divs, I want to change its background color. Additionally, I want the first div to be active by default with a colored background.

The code I am using is as follows:

.tabs.active a {
  background: black;
}

<div class="col-md-2 tabs">
  <a href="#">
    <p>First</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Second</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Third</p>
  </a>
</div>

However, the color is not changing. If anyone can identify where my code has gone wrong, please let me know.

javascript jquery html css

Answer 1

Answer №1

While CSS alone cannot directly capture a click event, there are some clever workarounds available. One popular method involves using a checkbox:

div {
  width: 120px;
  height: 60px;
  padding: 6px;
  background-color: green;
  color: white;
  border: 5px solid blue;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: table;
  margin: 25px;
}
input[type="checkbox"]:checked + label div {
  background-color: orange;
  color: black;
}

<input type="checkbox" id="cb1">
<label for="cb1">
  <div>
    Click Me - Div 1
  </div>
</label>

<input type="checkbox" id="cb2">
<label for="cb2">
  <div>
    Click Me - Div 2
  </div>
</label>

By enclosing the divs in labels associated with hidden checkboxes, any interaction within the label triggers a change in the checkbox state, causing CSS styling to be applied accordingly.

The selector

input[type="checkbox"]:checked + label div

targets checked checkboxes followed immediately by labels and their enclosed div elements. It is crucial that the label directly follows its corresponding checkbox in the HTML structure.

Feel free to customize this code to better fit your specific requirements.

UPDATE: In a previous iteration of this solution, the clickable area extended across the entire parent container due to the default behavior of labels. By utilizing display: table;, this issue is resolved without compromising block-level functionality. Alternatively, you can opt for inline-block to maintain divs on the same line as needed.

Answer 2

While CSS alone cannot directly capture a click event, there are some clever workarounds available. One popular method involves using a checkbox:

div {
  width: 120px;
  height: 60px;
  padding: 6px;
  background-color: green;
  color: white;
  border: 5px solid blue;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: table;
  margin: 25px;
}
input[type="checkbox"]:checked + label div {
  background-color: orange;
  color: black;
}

<input type="checkbox" id="cb1">
<label for="cb1">
  <div>
    Click Me - Div 1
  </div>
</label>

<input type="checkbox" id="cb2">
<label for="cb2">
  <div>
    Click Me - Div 2
  </div>
</label>

By enclosing the divs in labels associated with hidden checkboxes, any interaction within the label triggers a change in the checkbox state, causing CSS styling to be applied accordingly.

The selector

input[type="checkbox"]:checked + label div

targets checked checkboxes followed immediately by labels and their enclosed div elements. It is crucial that the label directly follows its corresponding checkbox in the HTML structure.

Feel free to customize this code to better fit your specific requirements.

UPDATE: In a previous iteration of this solution, the clickable area extended across the entire parent container due to the default behavior of labels. By utilizing display: table;, this issue is resolved without compromising block-level functionality. Alternatively, you can opt for inline-block to maintain divs on the same line as needed.

Answer 3

Answer №2

To implement the focus Pseudo class with Tabindex, you can use the following code:

However, it's important to note that if you focus on any other element, the background style of the tabs may be lost.

.tabs>a>p:focus{ 
  background-color:gray !important;
  display:inline-block;
  color:#000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="1"> First </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="2"> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="3"> Third </p>
    </a>
</div>

Answer 4

To implement the focus Pseudo class with Tabindex, you can use the following code:

However, it's important to note that if you focus on any other element, the background style of the tabs may be lost.

.tabs>a>p:focus{ 
  background-color:gray !important;
  display:inline-block;
  color:#000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="1"> First </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="2"> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" >
    <a href="#">
        <p tabindex="3"> Third </p>
    </a>
</div>

Answer 5

Answer №3

Utilizing the :target pseudo-class

.col-md-2:target {background-color: black;}

<div class="col-md-2 tabs" id="first">
    <a href="#first">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs" id="second" >
    <a href="#second">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" id="third">
    <a href="#third">
        <p> Third </p>
    </a>
</div>

Answer 6

Utilizing the :target pseudo-class

.col-md-2:target {background-color: black;}

<div class="col-md-2 tabs" id="first">
    <a href="#first">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs" id="second" >
    <a href="#second">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs" id="third">
    <a href="#third">
        <p> Third </p>
    </a>
</div>

Answer 7

Answer №4

$(".tabs").on("click", function(e){
  e.preventDefault();
  $(".tabs.active").removeClass("active");
  $(this).addClass("active");
});//

.tabs.active a
{
  display: block;
  background: black;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="col-md-2 tabs">
    <a href="#">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Third </p>
    </a>
</div>

Answer 8

$(".tabs").on("click", function(e){
  e.preventDefault();
  $(".tabs.active").removeClass("active");
  $(this).addClass("active");
});//

.tabs.active a
{
  display: block;
  background: black;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="col-md-2 tabs">
    <a href="#">
        <p> First </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Second </p>
    </a>
</div>
<div class="col-md-2 tabs">
    <a href="#">
        <p> Third </p>
    </a>
</div>

Answer 9

Answer №5

Give this a shot...

$(".tabs").on("click", function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
});

By doing this, the .active class will be added to the clicked element and your CSS styles will take effect.

Answer 10

Give this a shot...

$(".tabs").on("click", function(){
  $(".active").removeClass("active");
  $(this).addClass("active");
});

By doing this, the .active class will be added to the clicked element and your CSS styles will take effect.

Answer 11

Answer №6

$(window).load(function () {
$('.nav-menu ul li a').click(function (e) {
    $('.nav-menu ul li').removeClass('active');
    $(e.currentTarget).parent('li').addClass('active');
});

});

check out this link for more information

Answer 12

$(window).load(function () {
$('.nav-menu ul li a').click(function (e) {
    $('.nav-menu ul li').removeClass('active');
    $(e.currentTarget).parent('li').addClass('active');
});

});

check out this link for more information

Answer 13

Answer №7

It seems like there may be an issue with the CSS you provided. Here is a revised version that should work:

.tabs:active {
    background-color: black;
}

Answer 14

It seems like there may be an issue with the CSS you provided. Here is a revised version that should work:

.tabs:active {
    background-color: black;
}

Answer 15

Answer №8

It seems there may be some confusion regarding whether you prefer each div to change colors independently or if only one should be highlighted.

If your goal is to have only one div selected at a time, consider implementing @Magnus Buvarp's solution using radio buttons instead of checkboxes with the same name attribute.

div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: #eee;
  border: 2px solid gray;
}
input[type="radio"] { /* updated to "radio" */
  display: none;
}
input[type="radio"] + label { /* updated to "radio" */
  display: table;
  margin: 20px;
}
input[type="radio"]:checked + label div { /* updated to "radio" */
  background-color: yellow;
}

<strong>Only one can be selected!</strong>

<input type="radio" name="group1" id="rb1">
<label for="rb1">
  <div>
    Click Me!
  </div>
</label>

<input type="radio" name="group1" id="rb2">
<label for="rb2">
  <div>
    No! Click Me!
  </div>
</label>

By clicking on one radio button, the other will become unselected.

The downside is that one of the two options always has to be selected once you make a choice. Consider your needs before deciding if this approach is suitable for you.

P.S. Made some minor color adjustments for no particular reason, just felt like it :)

Answer 16

It seems there may be some confusion regarding whether you prefer each div to change colors independently or if only one should be highlighted.

If your goal is to have only one div selected at a time, consider implementing @Magnus Buvarp's solution using radio buttons instead of checkboxes with the same name attribute.

div {
  width: 100px;
  height: 50px;
  padding: 4px;
  background-color: #eee;
  border: 2px solid gray;
}
input[type="radio"] { /* updated to "radio" */
  display: none;
}
input[type="radio"] + label { /* updated to "radio" */
  display: table;
  margin: 20px;
}
input[type="radio"]:checked + label div { /* updated to "radio" */
  background-color: yellow;
}

<strong>Only one can be selected!</strong>

<input type="radio" name="group1" id="rb1">
<label for="rb1">
  <div>
    Click Me!
  </div>
</label>

<input type="radio" name="group1" id="rb2">
<label for="rb2">
  <div>
    No! Click Me!
  </div>
</label>

By clicking on one radio button, the other will become unselected.

The downside is that one of the two options always has to be selected once you make a choice. Consider your needs before deciding if this approach is suitable for you.

P.S. Made some minor color adjustments for no particular reason, just felt like it :)

Answer 17

Answer №9

If you want to toggle classes, you can use the toggleClass() method in jQuery or JavaScript (

element.classList.toggle("active")

)

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

You also need to make changes in CSS:

.tabs.active{
  background: black;
}

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

.tabs.active{
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 tabs active">
  <a href="#">
    <p>First</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Second</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Third</p>
  </a>
</div>

Answer 18

If you want to toggle classes, you can use the toggleClass() method in jQuery or JavaScript (

element.classList.toggle("active")

)

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

You also need to make changes in CSS:

.tabs.active{
  background: black;
}

$(".tabs a").click(function(){
  $(this).parent(".tabs").toggleClass("active")
});

.tabs.active{
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 tabs active">
  <a href="#">
    <p>First</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Second</p>
  </a>
</div>
<div class="col-md-2 tabs">
  <a href="#">
    <p>Third</p>
  </a>
</div>

Alter the div's color when it is clicked by the user

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Leveraging JQuery to Invoke Partial View

Is it possible to visually distinguish the selected mat-grid-tile? Particularly when they are being created dynamically

Steps for generating a unique division element for every javascript response

Activate divs with Bootstrap5 modal toggle functionality

Discover media sources with HTML5's getUserMedia()

I encountered a ReferenceError while working on my Google Authentication code, specifically stating that the variable "id" is not defined

The controller failed to return a value when utilizing the factory

Creating articles within a KnowledgeBase using PHP, jQuery, and MySQL

The text on the HTML page reads from left to right in a page that

Floating Crosshair within Div - Limited to Container

Unable to display keyboard on HTML input form in webview

Deciphering Keycodes in Chrome for Mac OS is a must-know skill for smooth

Display message until response from ajax is obtained

(Express JS) What is the correct way to integrate another module into my router? (I am consistently encountering an undefined reference error)

How can the datepicker be adjusted to display from right to left?

Display modal within a React list

The internet explorer browser does not support the keypress event

Is it possible to vertically align variable length text within a container of fixed height?

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

Analyzing exif data during the process of uploading a batch of images