I am looking to utilize aria-expanded="true" in order to modify a css property such as an active class :
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
My goal is to have the <a> element with a background-color: #42DCA3 but only when aria-expanded="true" is present.
Why use javascript when you can achieve the same with just css?
a[aria-expanded="true"]{
background-color: #42DCA3;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>li a[aria-expanded="true"] span{
color: red;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>li a[aria-expanded="true"]{
background: yellow;
}<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true">
<span class="network-name">Google+</span>
</a>
</li>
<li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false">
<span class="network-name">Google+</span>
</a>
</li>One way to achieve this is by utilizing the querySelector() method with an attribute selector '[attribute="value"]'. You can then manipulate the CSS rule using the .style property. Here's an example:
document.querySelector('a[aria-expanded="true"]').style.backgroundColor = "#42DCA3";<ul><li class="active">
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="true"> <span class="network-name">Google+ with aria expanded true</span></a>
</li>
<li>
<a href="#3a" class="btn btn-default btn-lg" data-toggle="tab" aria-expanded="false"> <span class="network-name">Google+ with aria expanded false</span></a>
</li>
</ul>For jQuery users:
If you prefer to use jQuery, you can achieve the same result with the css() method:
$('a[aria-expanded="true"]').css('background-color','#42DCA3');I hope this explanation helps.
If you are willing to incorporate JQuery into your code, you have the ability to change the background color of any link that has the attribute aria-expanded set to true. To achieve this, you can use the following code snippet:
$("a[aria-expanded='true']").css("background-color", "#42DCA3");
Depending on your specific requirements for targeting certain links, you may need to adjust your selector accordingly.
<iframe id="frame" width="100%" height="100%"> </ifrme> Is there a way to render a component within this iframe by creating an HTML element or using another method? new Vue({ el:'#frame', store:store, router:router, ren ...
Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...
I have a Next.js app that needs to be built on our company servers before deployment. We use a proxy, and I've configured yarn to use the proxy as well. yarn config set proxy http://xx.xxx.xx:xxxx yarn config set httpsProxy http://xx.xxx.xx:xxxx yarn ...
Having some trouble with the layout of a website, particularly in IE. The issue can be observed at . When comparing the page in IE to Firefox, there are noticeable differences. Firstly, the top module on the right side is not displaying correctly in IE. I ...
Issue Whenever a user updates the theme on the front-end, my Node.js API needs to update the static CSS file located in a public folder set up by Express. This way, when pages are served again with <link href="public/theme.[userId].[hash].css", the use ...
I have been diligently following various tutorials on incorporating a webfont into my Chrome extension, but unfortunately, none of them seem to be working for me. Despite all my efforts, the font remains unchanged and still appears as the default ugly font ...
After successfully updating my orders post payment, I am wondering how I can showcase them on my Vue front end. Below is the HTML template displaying the list of orders made: <template> <div> <div v-for="order in orders&quo ...
Is there a way to change integer values in a table to actual names and display them on a webpage by setting a scope in the controller and passing that string to the HTML? For example, this is an example of the HTML code for the table row: <thead> ...
Similar Question: How can I have a confirmation message when navigating away from a page after making changes? I've noticed an interesting feature on Stackoverflow: when you start writing a new question and attempt to leave the page, it prompts y ...
Internet browsers like Firefox and Chrome have the ability to take screenshots of visited websites and display them as "recently used websites" on a new tab. However, if your website contains confidential information, you may be wondering how to prevent b ...
I am currently working on an Angular application that incorporates a map using Leaflet OpenStreetMap. I want to display the real-time latitude and longitude for the map, which should update based on the location. Can someone advise me on how to add the cur ...
I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...
Recently, I came across this interesting website with a background that lights up depending on the movement of your mouse. I was wondering if there is a way to make that illuminated spot move around on its own. If you want to see how it looks, check out th ...
One of the rows in my table contains a nested table. I want both tables to fill up 100% of the width of the parent element. How can I achieve this? Check out the demo here Here's the HTML code: <div class="container"> <table> <tr ...
Hey everyone, I'm encountering an issue with making an ajax request using jQuery. I keep getting an error. I've tried removing certain variables that contain 'line breaks, double quotes, etc.' and that seems to have resolved the issue. ...
I am currently building a PHP website with a registration page for users. I am implementing the LOOPJ jQuery Autocomplete script from to enable users to select their country easily. In this process, I encountered an issue where the value of another field ...
Does anyone have suggestions on how to manage redirects using the Request npm from websites like bitly, tribal, or Twitter's t.co URLs? For instance, if I need to access a webpage for scraping purposes and the link provided is a shortened URL that wil ...
When it comes to my CSS, I have taken the approach of creating smaller files for specific functions and then using minification to merge and compress them into one file for easier download. I want to apply the same strategy to my JS Files by logically sep ...
Although I'm not a fan of hard coding, I've been struggling to find a solution to my problem and some explanations are just not clicking for me. The issue at hand involves three data products in the cart, product details, and placed order data f ...
I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...