Restore background color when clicked outside

I'm currently using this code to both load content from a div and change the color of the tab when a user clicks on it. However, I'm struggling to find a way to revert the background color back once the user clicks on something else. Any suggestions on how I could achieve that?

$(function() {
        $('#tab-1').click(function() {
            var tabcontent = "<?php echo preg_replace("/\r?\n/", "\\n", addslashes($tabcontent[0]));?>";
            document.getElementById('top-tabs-content').innerHTML = tabcontent;
            $(this).css("background-color","#F7C703");
        });
    });
jquerycsstabsbackground-color

Answer №1

$(function() {
    $('#tab-1').on('click', function() {
        var tabContent = "<?php echo preg_replace("/\r?\n/", "\\n", addslashes($tabcontent[0]));?>";
        document.getElementById('top-tabs-content').innerHTML = tabContent;
        $('.tabclass').css("background-color","#defaultcolour");
        $(this).css("background-color","#F7C703");
    });
});

Assign a new class to the HTML elements, then reset all the elements to their default colour before changing the background color of the clicked element.

Answer №2

To add a click handler to the document element and utilize the .closest() method, follow these steps:

$(document).on('click', function(e) {
    if ( !$(e.target).closest('#tab-1').length ) {
       $('#tab-1').css("background-color", '');
    }
});

Check out this demo on jsFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Field for Entering Time

I need help creating a form that will only accept time values formatted as HH:MM. Can someone guide me on how to filter user input and display the colon in the text field? I am thinking that I might need a specialized input box for this purpose. ...

javascriptjqueryhtml

Attempting to place the search bar within the navigation bar

Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far. Any assistance would be greatly appreciated, thank yo ...

javascripthtmljquerycss

modifying the IP address used while making a jQuery request

I am currently working on integrating a payment system, but unfortunately, I do not have a static IP address and my country is restricted. I am using my personal hosting with the whitelisted IP, however, it seems like the initial request to their servers ...

javascriptphpjqueryajaxwordpress

Ways to distribute varied Responsive Images

Welcome to our website: .php .jquery .yii based Depending on the width of the viewport, we require at least two different infographic images. The client is very particular about w3c validation The picturefill solution does not pass validat ...

phpjquerymobileyiiresponsive-design

Tips on conducting a statistical analysis without having to wait for the completion of an AJAX response

I am looking to track the number of clicks on a specific div with the id #counter and then redirect the user to a different website. To achieve this, I have implemented an ajax call on the click event of the #counter div. Upon successful completion of the ...

javascriptphpjqueryajaxhttp-redirect

The Chartjs bar graph fails to display data upon initial page load

My HTML page includes a bar chart created using the ChartJS library. However, upon loading the page, the chart appears empty without displaying the data I provided and without rendering the bars. It only responds after clicking on the legend - first displa ...

javascripthtmljquerychart.js

Troubleshooting problems with resizing images using CSS

I am experiencing an issue with resizing images that I have configured in the admin panel. .users-list>li img { border-radius: 50%; max-width: 100%;    height: auto;     width: 100px;     height: 100px; } When enlarged, the images l ...

htmlcssimage

Vue-Router triggers a "ReferenceError: jQuery is undefined" error

Setting up a new vue project and encountering a router error in the console: "[vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined [vue-router] uncaught error during route navigation: ReferenceError: jQuery is no ...

jqueryvue.jsnpmvuejs2vue-router

Guide on combining vendor CSS files in a React application using Webpack

Incorporating third-party libraries is an essential part of my project. For example, I have Mapbox GL installed via npm, which comes with CSS files needed for its functionality. The Mapbox GL CSS file can be found at mapbox-gl/dist/mapbox-gl.css in the no ...

javascriptcsstypescriptwebpackcss-modules

jQuery not targeting absolute positioned duplicates of the <div>'s

(Please find the code link at the bottom of this question) I have been working on a radial menu for a web project. However, I've encountered an issue that has me stuck for hours now. No matter what I try, I can't seem to get any response from th ...

jqueryhtmlcss

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

There are 3 words that I want to rotate on their x-axis every 2 seconds (repeating). Using jQuery: $(function () { count = 0; wordsArray = ["Innovation", "Creativity", "Success"]; setInterval(function () { count++; $("#words").text(wordsArray[co ...

javascriptjqueryhtml

What is the best way to conceal floated elements with overflow in CSS?

How can I ensure that my block container element only displays the content of block elements, cutting off any floated elements that are taller than the parent container? Applying overflow: hidden seemed like a simple solution, but it created a new block f ...

css-floatcss

Is there a way to apply a blur effect to just the div itself without affecting its contents

<style type="text/css"> .inner-container{ width:400px; height:400px; position:absolute; top:calc(50vh - 200px); left:calc(50vw - 200px); overflow:hidden; } #no-blur{ z-index: 20; } .box{ position:absolute; height: ...

htmlcss

What is the best way to implement a shared function across two classes?

I have a jQuery code that works as intended with the .foto class. Now, I need to add the .fotoleft class to perform the same function. How can I make the function work for two different classes? $(document).ready(function() { $(".foto").click(functi ...

javascriptjqueryhtml

Allow the button to be clicked only when both options from the 1/3 + 1/3 radio buttons are selected

How can I ensure that the next <button> at the bottom of the HTML is only clickable when at least one of each <input type="radio"> is checked? Also, how do I integrate this with my current function? The button itself triggers a jQuery function ...

javascriptjqueryhtmljson

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

csswordpresswordpress-themingbootstrap-5

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

htmlcssangularprimeng

Change justify-content-between to something else

After successfully fixing the issue with aligning the navbar brand in the middle of my navigation bar, I am now facing a new challenge. I want to add a button right before the right navigation toggle, but all my attempts have been unsuccessful so far. I&ap ...

htmlcssbootstrap-5

Adjusting the width of the container <div> will automatically resize the inner <div> to match

I have a main container element. .wrapper{ border:1px solid blue; position:relative; top:20%; left:30%; height: 300px; width: 350px; } When I adjust the width of the parent container, the child box does not reposition itself accor ...

javascripthtmlcss

Incorrect Pixel Width with Relative Positioning in Internet Explorer 11

I'm encountering a positioning problem that seems to be specific to Internet Explorer (11). I'm attempting to absolutely position a div tag in relation to another element. The problematic code snippet appears as follows: <div id="FacebookWra ...

htmlcssinternet-explorer