I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed.
I have attached 2 screenshots showing the code and design.
Thank you. https://i.sstatic.net/GBOSf.png
I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed.
I have attached 2 screenshots showing the code and design.
Thank you. https://i.sstatic.net/GBOSf.png
When a tab is clicked, it receives the active class... allowing you to customize its style according to your preferences; It's important to ensure that any classes overriding the default Bootstrap settings are declared after the Bootstrap framework has been loaded. The code snippet below illustrates this concept:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<style>
.nav-pills .nav-link {
color: #000;
background: #fff;
text-decoration: underline;
text-decoration-color: orange;
}
.nav-pills .nav-link.active {
color: orange;
background: #fff;
text-decoration: underline;
text-decoration-color: orange;
}
</style>To customize the colors on your website, modify your css file with the following code:
.active {
color: blue;
}
After that, use JavaScript to assign a class to your html element when you click on the text:
function makeBlue() {
var item = document.getElementById("section");
item.classList.add("active");
}
Incorporate this line of code into your html to apply the changes:
<div onclick="makeBlue()" ...>
When the code is executed, it displays "Clienti" in yellow color. Clicking on "Profile" changes the color of clienti to black and profile to yellow. If you click on "Clienty" again, the color switches back to its original state.
function changeColor1(){ document.getElementById('profile').classList.remove("yellowColor"); document.getElementById('clienti').classList.add("yellowColor");
};
function changeColor2(){ document.getElementById('clienti').classList.remove("yellowColor"); document.getElementById('profile').classList.add("yellowColor");
};.yellowColor{
color:yellow;
}<h1 onclick="changeColor1()" id="clienti" class="yellowColor">Clienti</h1>
<h1 onclick="changeColor2()" id="profile">Profile</h1>Check out these custom components I created: <UserImg imgUrl={userPhoto}> <DropDown> <div onClick={handleAuth}>Sign Out</div> </DropDown> </UserImg> const DropDown = styled.div` letter-spacing: 0.2em; positi ...
I needed to display a one-dimensional array in a 2D grid format with 3 rows and 3 columns. The array itself contains numbers from 1 to 9. const array = Array.from({ length: 9 }, (_, i) => i + 1); In my React component, I have it rendering as a series o ...
I am faced with a challenge on my webpage where I need to adjust the height due to scrolling elements, while also detecting the scrollTop() distance to apply some CSS to the navigation bar. Despite setting the body's height to 100%, it appears that I ...
I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...
Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...
I am looking to position the main contents (content 1 and content 2) in between two side menus on my exercise page. At the moment, the main contents are overlapping with the two menus. Can someone guide me on how to fix this alignment issue? Thank you. ...
Is there a way to extract the inner text from HTML using HTMLAgilityPack in C#, excluding text within any <h1-6> tags? I prefer not to use Regular Expressions and stick to HTMLAgilityPack. This is my current approach: var document = new HtmlDocumen ...
Currently, I am in the process of coding a website that contains numerous images. To assist me in organizing and arranging these images, I have turned to angularjs. Initially, everything was progressing smoothly until this issue arose: The layout is stru ...
Seeking assistance for implementing functionality that replaces a button with an input field, where users can enter information and hit enter. Once the action is completed, the original button should reappear. The current script works effectively but lacks ...
My current objective revolves around implementing a specific design, as illustrated in this image. The issue I'm encountering in my code pertains to the utilization of the bootstrap grid system for ease of layout. However, when I incorporate both tex ...
After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...
Looking to create a similar effect as seen on this website () On this site, users can upload their images (4000 * 400) and have the option to add Mickey Mouse ears over their image before saving it. The Mickey Mouse ear is resizable from all four sides f ...
I have successfully combined multiple weather APIs on my website, which can be found here. Recently, I started using the weather.gov API and it has been quite effective. However, there are certain data points that I need to extract which the weather.gov A ...
I've encountered an issue while trying to pass images from express to react. My express.static is correctly set up, so when I visit localhost:5000/public/images/me.jpeg, the image loads in my browser. However, when I attempt to use <img src="/publi ...
Objective: I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links. When the cursor moves to a new td row, the previous row should return to its default state a ...
For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...
The current MUI button supports size prop values as the following small medium large Although this feature is handy, I find myself wishing I could specify the height and width using the style prop to customize the size like <Button v ...
I have created a combat simulation tool in Kotlin for an online gaming community. Users can input the combat levels of two players, choose the number of duels to simulate, and then initiate the simulation which will provide win percentages and other stats. ...
What is the solution for adjusting a table on mobile view? I am aiming to achieve: https://i.sstatic.net/YkKAW.png However, it currently looks like this: https://i.sstatic.net/GW5mX.png Here are my code snippets: <script src="https://cdnjs. ...
Looking for a solution: def get_info(url): options = webdriver.ChromeOptions() options.headless = True chrome_browser = webdriver.Chrome('./chromedriver', chrome_options=options) chrome_browser.get(url) name = chrome_browser.f ...