Is it possible to modify CSS properties by clicking on buttons?

Hello, I really need help with this task. I want to change the style of a button (which is actually a link) by clicking on it. These buttons are housed within a dynamic child div that changes each time, but the name of the dynamic child div remains constant. Please note: Only one child div will be displayed in the parent div at a time. Here is the style code: 

.btn_child              {display:block;  margin:-1px; border:1px solid; background-color:#428bca; border-color:#357ebd; text-align:left; padding-left:15px;  line-height:30px; }
.btn_child:hover        {background-color:#3276b1; border-color:#285e8e; }
.btn_child_selected     {background-color:#3276b1; border-color:#285e8e; }
And here is the HTML code: 
<div id="parent" class="parent_class"> 
<!--this is a dynamic content and the ID will change. only the name will still the same-->
<div id="dynamic_child1" name="child">
<a class="btn_child" target="_blank" href="" > link1        </a>
<a class="btn_child" target="_blank" href="" > link2        </a>
<a class="btn_child" target="_blank" href="" > link3        </a>
</div>
</div>
IMPORTANT: Clicking on a new button will return the previous one to its default style while changing the style of the newly clicked button. For more information, you can visit this link: http://jsfiddle.net/c1znyrw5/

javascriptjqueryhtmlcss

Answer №1

At last, I've achieved the desired outcome exactly how I envisioned it! For those who are keen on this topic, here is the solution:

<script><!--jquery script-->
$('.parent_class').on('click','.btn_child',function () {
$('.btn_child').removeClass('btn_child_selected');
$(this).addClass('btn_child_selected')
});
</script>

You can also view the accomplished task by following this link: http://jsfiddle.net/c1znyrw5/3/

I express my gratitude to each and every one of you for your invaluable assistance.

Answer №2

$('#elementID').click(function() {
    $('#elementToChange').css({
        'background-color': 'blue',
        'color': 'black',
        'font-size': '20px'
    });
});

where #elementID refers to the button and #elementToChange refers to the element you want to change the CSS of.

Alternatively, we can create a CSS class and use the addClass method instead of directly changing the CSS properties.

$('#elementID').click(function() {
        $('#elementToChange').addClass('newCSSClass');
    });

Answer №3

To bind click events to dynamically generated child elements using jQuery, you can use the .on method. Within this event, you can then change the style of the corresponding control.

$('#parent').on('click', '.btn_class', function() { 
    $(this).addClass("someCss");
});

Answer №4

To implement this functionality, first define a CSS class with the name "active". Then, utilize the following JavaScript code to dynamically add this class to the targeted element when a button is clicked.

    $('#divid').click(function() {
    $('#div').addClass('active');
});

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

Failed Axios POST request on iOS devices

Attempting a straightforward ajax POST from domain1 to domain2 using Axios. This involves a cross-domain simple POST without requiring a PREFLIGHT (OPTIONS) call. The response returned by the application is a basic JSON string. This process functions smoo ...

javascriptiosajaxlaravelaxios

JavaScript string representing the actual value of a string

In order to reliably extract string literals from a JavaScript string, I need to create a function, let's name it f. Here are some examples: f('hello world') //-> 'hello world' (or "hello world") f('hello "world"') / ...

javascriptnode.js

Steer clear of including numerous variable values in Angular 2 while adjusting the class of selected items

Here's a question from someone who is new to Angular 2 and looking for an efficient way to change the active CSS class of tabs without using the router: activeTab: string; switchActiveTab(newTab: string) { this.activeTab = newTab; } <div clas ...

htmlangulartypescript

What is the best way to update the content of a modal using jQuery and AJAX?

Despite previous inquiries on this matter, none of the answers provided have been helpful to me. Therefore, I am addressing the issue again... I am currently developing the frontend of a website that does not involve any backend functionality (no server c ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Click on the button without any reaction

I'm having trouble with the button. When I click on the button with ng-click="goSearchTitle()", nothing happens. Any idea why it's not working? <body ng-app="myapp"> <div ng-contoller="searchbyTitle"> <h3>Sea ...

javascriptangularjs

Specialized Node.js extension for automatic dependency installation

My current setup involves a custom Yeoman generator for specific applications, which comes with its own set of dependencies and configurations. - GruntJS must be installed globally; - Bower must be installed globally; - Yeoman must be installed globally ...

javascriptnode.jsnpmyeoman

Encountering a problem while trying to launch the development server for a React application using the npm-start

I followed the steps to create a react application using npx create-react-app myapp, but when I use npm start, it fails to start a developer server. Even after trying to reinstall the node_modules, the issue persists. I am using the latest versions of Reac ...

javascriptreactjsnpmnpm-start

Error message: "The property is not found within the specified type when using the OR operator with

Within my Angular component, I am faced with a challenge involving an Input that can be one of two types. @Input() profile: UserProfileDetails | BusinessProfileDetails; The structure of the profile template is straightforward and I want to avoid duplicati ...

javascriptangulartypescript

Steps for implementing an onclick action in Angular 4 from infowindow content

Currently, I am integrating Google Maps into an Angular 4 project and I need to implement a click event inside the infowindow. How can I achieve this? I attempted the following code but encountered an issue where the name is undefined. Even though I called ...

htmlangulargoogle-mapsonclickinfowindow

The toggler in Bootstrap 5's Navbar menu is experiencing difficulties opening on mobile browsers

Just arrived here for the first time. Encountering an issue with my Bootstrap 5.1 Navbar menu. Background info: My website is hosted locally via Xampp with php pages for forms and cookies. Everything functions perfectly on desktop. Checked responsiveness o ...

javascripthtmlcssnavbarbootstrap-5

Are there alternative methods, aside from using a computed property, that can be utilized to store a Vue route parameter in a way where

In my Vue component, I am working on passing a route parameter through XHR requests and potentially using it in other areas as well. Initially, I considered storing it as a data attribute but realized that it could be modified by someone. Then it occurred ...

javascriptvue.jsvuejs2vue-componentvue-router

methods for extracting header information using JavaScript

Is there a way to retrieve values from the header URL using JavaScript? Consider this scenario: www.example.com/content.html?param=value How can one extract this information upon redirecting to the page content.html? What techniques could be employed f ...

phpjavascriptjqueryhtmlajax

Tips for selecting the initial and final elements of a specific class

Here is a simple example of table markup: <div class="table"> <div class="table__headers"></div> <div class="table__row"></div> <div class="table__row"></div> </div& ...

javascriptvue.jssass

Interactive PDFs that launch a new browser tab rather than automatically downloading

I am facing an issue with my web API that is returning a JSReport as an encoded byte array. Despite multiple attempts to read the byte array, I keep encountering either a black screen or an error message indicating "failed to download PDF". Interestingly, ...

javascriptajaxpdfblob

Using jQuery to make a call to a web API with parameters within an MVC view

I'm struggling to make a call to my newly created Web API in order to post a message, but I can't seem to get it working. I have a view that retrieves data from the controller action method. As someone new to creating web APIs and calling them wi ...

c#jqueryajaxasp.net-web-apimodel-view-controller

The resolvers contain the Query.Mutation but it is not specified in the schema

const { ApolloServer, gql } = require('apollo-server-express'); const express = require('express'); const port = process.env.PORT || 4000; const notes = [ { id: '1', content: 'This is a note', author: 'Adam ...

javascriptexpressgraphql

jsTree open_all not triggering consistently

Upon receiving x number of projects and their corresponding directory structure from the server in a single AJAX call, the connection is disconnected from the server. Subsequently, all operations must be carried out from the browser. After loading the pro ...

jqueryjsonjstree

Arranging the list items in a perfectly straight vertical line

Concern: I'm struggling with alignment issues on my website. I have country flags displayed using display:inline;. The issue arises when the number next to the flag exceeds single digits (e.g., 10 or more) as it affects the alignment due to the consi ...

htmlcsslistalignment

Deciphering the LocalDate and nested object array in an AJAX response

Seeking assistance, looking for solutions to two problems. Firstly, how can I display LocalDate in an ajax response? And secondly, how do I iterate over a list of Custom objects received in the ajax response? I am passing a List of Custom Objects and Loca ...

javascriptjqueryjsonajaxlist

The random number generator often omits both the upper and lower limits

I am working with an array that contains letters from A to H. However, when using a random number generator, I have noticed that the letters A and H are rarely selected. How can I adjust my approach to make sure these two bounds are included more often? ...

javascript