I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab.
Here is what I've tried: http://jsfiddle.net/pThn6/2031/
For example, when the second tab is active, the first tab's color will be red. Similarly, when the third tab is active, the first and second tab's colors will also be red.
Do you think this is achievable?
Thank you in advance!
You can easily implement this functionality using just three lines of jQuery code.
Check out the updated fiddle here
See it in action:
function switchTab(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
}
$("#n_tab li a").click(function() {
$(this).parent().prevAll().addClass('redcol');
$(this).parent().nextAll().removeClass('redcol');
});.redcol>a {
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="n_tab" class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">First Tab</a></li>
<li><a href="#bbb" data-toggle="tab">Second Tab</a></li>
<li><a href="#ccc" data-toggle="tab">Third Tab</a></li>
<li><a href="#ddd" data-toggle="tab">Fourth Tab</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
</body>
</html>I hope this solution works for you!
Yes, the possibilities are endless!
Give this a try:
$('ul li a').on('click', function() {
let numClicked = $(this).parent('li').index();
$("a").each(function(index) {
if (index <= numClicked) {
$(this).addClass('active-red');
} else {
$(this).removeClass('active-red');
}
});
});@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');
.container {
margin-top: 10px;
}
.active-red {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">1st</a></li>
<li><a href="#bbb" data-toggle="tab">2nd</a></li>
<li><a href="#ccc" data-toggle="tab">3rd</a></li>
<li><a href="#ccc" data-toggle="tab">4th</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>I'm looking to create a small red div that spans the full width at a fixed top position within another div that has an overflow scroll property. I've provided a jsFiddle link for reference: http://jsfiddle.net/mCYLm/2/. The problem arises when t ...
Below is a snippet of Vue Code illustrating the structure we're working with: <template> <li class="mm-product-item" v-on:click="edit(item)"> <p class="mm-product-info input-field"> <input ...
I implemented a progress modal popup to show progress for page reloads. This script is set to the master page and injects the progress modal popup when the form submit event is fired: <script type="text/javascript"> function ...
Whenever I click a button, it moves to the next item in an array. Once it reaches the last item in the array, I want to assign the "endButton" class to the button tag. I plan to use the ng-class directive within the HTML code to evaluate the expression. T ...
My goal is to display content from a json file that varies in type and consists of pages divided into chapters. Users can navigate through the content using an aside menu or next and previous buttons. Currently, I am able to display the content by inserti ...
When working with JSON data, I extract the values and attempt to round them using the script below: function onLoad(){ var output = $('#product'); var id = getUrlVars()["cPath"]; $.ajax({ ...
I've searched high and low for a solution to this particular issue, but I haven't found one that suits my needs exactly. Currently, I'm using the JQuery Validator Plugin for a web form. I don't want the error message appended to the pr ...
Is it possible to display different images from a server using AngularJS? I have ng-repeat set up for posts and for each post, I want to retrieve its avatar. My approach is to call a function getImage(post.author.id) to fetch the corresponding avatar. $ ...
I am currently developing a webpage in asp.net that utilizes JQuery UI dialog. This dialog contains a submit button which, when clicked, closes the dialog. I am looking to incorporate a call to a Webmethod upon submission. If the method returns true, then ...
Experiencing some unexpected behavior with iOS mobile safari on version 13.3. I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While ever ...
Why is the bootstrap responsive table not functioning properly with dir-paginate? I successfully created a responsive grid HTML table using bootstrap with static data, but when my angular developer colleague incorporated 'dir-paginate' to fetch d ...
In my current project, I am utilizing the React version of Semantic-UI. I have a requirement to develop a custom dropdown component with a slightly different HTML structure compared to the standard Semantic-UI dropdown. To achieve this, I created a new cla ...
I have a unique situation where a div containing multiple SVG elements that act as buttons is added to the page after the user interacts with it. I am trying to add events to these SVG elements using event delegation, where I inspect the target of the even ...
Within my code, I have a click event function set up like this: $('.expand2').click(function(e) { alert('in'); e.preventDefault(); var obj = $(this); ... I want to run this function immediat ...
Is it possible to create a flexible menu where clicking on an item does not cover other items in the menu? #demo { margin: 30px 0 50px 0; font-family: sans-serif; } #demo .wrapper { display: inline-block; width: 180px; height: 20px; position ...
Is it possible to embed a specific font into my website if I know it's not commonly available on users' computers? I've seen some websites using unique fonts as text and not images, so I'm curious about how that is achieved. Thank you, ...
I'm having trouble figuring out how to animate my links on hover with 3 different colors. I attempted using the linear-gradient property but it doesn't seem to be working. Any suggestions on how to proceed? Below is an example of what I'm a ...
I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...
I have successfully implemented Jcarousel from and it's functioning perfectly. Is there a way to create a rollover effect for the images when hovering over them with the mouse? What JavaScript code should be used for this, and where should it be impl ...
I'm using a responsive bootstrap application and encountering an error when trying to open a PDF on mobile. I can open the PDF from my iPhone, but when trying to do so on Android Chrome, I receive a "media not supported exception" message. The applic ...