I am currently attempting to implement a bootstrap pills example found here. However, I have noticed that the example lacks corresponding javascript or css for highlighting the clicked pill. How can I achieve the desired effect of turning the pill purple when clicked? The code snippet I have tried is as follows, but it does not seem to be working. Any assistance would be greatly appreciated.
$('#nav-link').on('click', function(e) {
this.backgroundColor = 'black';
});
Make sure to switch a class that changes the background.
$('#navbar #nav-link').removeClass("active");
$(this).addClass('active');
#navbar refers to the id of your navigation bar.
.active {
background: black;
}
$("#navbar").on("click", "li", function(e) {
$('#navbar ul li').removeClass("active");
$(this).addClass('active');
});.active {
background: red;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<nav class="navbar navbar-light navbar-expand-sm" id="navbar">
<div class="collapse navbar-collapse" id="navbar-list-2">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
</ul>
</div>
</nav>I am currently working on a single page that is responsible for showcasing Books (child component) on the Dashboard (Parent-component). In the DisplayBooks component, the data is fetched from the backend and stored in a books array. I then iterate through ...
Using react router prevents me from creating specific file path references for each route in Node. To prevent crashes when accessing a particular file path, I need to include this code in Node:app.use(express.static(path.join(__dirname, '/frontend-two ...
My goal is to fetch an object from an array by its id using the getItem() method. import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from 'rxjs/Observable'; impor ...
I'm having an issue with my signup user page where only half of it is functioning correctly. What works: The createUserWithEmailAndPassword call via firebase firestore runs successfully. What doesn't work: In the promise for that call, I'm ...
I'm currently working on a project to automatically retrieve YouTube URLs and incorporate a download button feature. I found a tutorial suggesting the use of 'ytplayer.config.args.url_encoded_fmt_stream.map.split(",");' After attempting to ...
The following array contains data: {"status":true,"data":[{"id":1,"pessoa_id":75505,"created_at":"2022-02- 01T17:42:46.000000Z","holder":"LEONARDO LIMA","validade&quo ...
Perhaps the title is a bit basic. Essentially, I am looking for something similar to mysqldump ... --no-data .... For instance, I have a JSON object structured like this: { "key1" : "value1", "key2" : "value2", "key3" : { "key3a" : 1, "key ...
Every time my component is rendered, I attach an event listener. mounted() { window.addEventListener("keydown", e => this.moveIndex(e)); } Interestingly, even when placed within the moveIndex method itself, the event listener persists and cannot ...
I made some changes to my page by adding new divs, and now I want to save all of it, replacing the old content. Example of the DOM body: <body> <div id="save_dom">Save</div> <div class="box">111</div> <div cla ...
<div id="component-navbar" :class="hasBackground"> computed: { hasBackground() { if (window.scrollY > 0) { return 'has-background' } } } I am facing an issue with my sticky nav bar where I want to apply a background ...
Currently, I am working on developing an application using Ionic-Angular. When it comes to incorporating slides in my app, I opted for the ionic 4 ion-slides component. Everything was going smoothly until I wanted to enable looping for the slides so that u ...
For instance, imagine a scenario where there is a login page requiring a username and password to meet specific criteria for validation: the username must contain a capital 'A' and the password should be exactly 8 characters long. The challenge l ...
Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...
For my current project, I'm implementing Angular and working with a JSON object that looks like this: items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]} I attempted to display ...
Struggling to find a solution to format calculation results with commas for thousand separators (e.g., 10,000). After implementing the .toLocaleString('en-US', {maximumFractionDigits:1}); method to format numbers in the output, I encountered unex ...
I am trying to dynamically change the chart type of a react-google-chart using a select box. Here is my code snippet: const GoogleGraph = ({chartType, handleChartTypeChange}) => ( <section> <Selector chartTy ...
Having trouble with my app. I've already published it, but now I need to make a small change. Whenever I try to start Expo, I keep getting this error: "Error: React Native is not installed. Please run npm install in your project directory. Couldn&apo ...
I am encountering an issue while trying to pass data from typing.js to ending-page.js within sibling components. Despite my efforts, the emit and event hubs are not functioning as expected. However, emitting from typing.js to the parent component works sea ...
My inventory consists of various products like smartphones, laptops, headphones, etc. However, in the end, all these products are represented as a single generalized ProductsModel ProductsModel import { Schema, model } from 'mongoose' export co ...
Can jQuery be used to match a string along with its enclosing tags? I am looking to identify the following… <p>Oops! We could not locate your form.</p> and either replace it or apply a specific class - I haven't decided yet. While I c ...