Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click:

1. The active tab should display a blue underline color.

2. When clicking on a tab, the blue line should appear under the active tab (similar to angular material tabs, but without using angular material).

Here are the tabs created:

<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>

Here is the CSS being attempted:

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Any help would be greatly appreciated. Thank you!

Answer №1

1). Take a look at this interactive demo on StackBlitz: https://stackblitz.com/edit/angular-rkcm9m

2). Here is the code snippet:

export class AppComponent  {
  name = 'Angular';
  selectedTab = "Tab1";

  makeActive(tab: string) {
    this.selectedTab = tab;
  }
}
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  border-bottom: 2px solid transparent;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  border-bottom: 2px solid blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<div class="tab">
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab1') }" (click)="makeActive('Tab1')">Tab1</button>
  <button class="tablinks" [ngClass]="{'active': (selectedTab == 'Tab2') }" (click)="makeActive('Tab2')">Tab1</button>
</div>

Answer №2

In the demonstration below, a bottom-border is utilized to achieve the desired effect. The border initially appears white, changes to grey when hovered over, and turns blue when active.

The jQuery code provided contains detailed comments for easy understanding.

If this solution does not meet your expectations, please feel free to let me know.


Live Demo

// Assign click event to all tablinks
$(".tablinks").click(function() {

  // Remove 'active' class from any other tabs which are currently active
  $(".tablinks.active").removeClass("active");

  // Assign 'active' class to the selected tab
  $(this).addClass("active");

});
.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 3px solid white;
}

.tab button:hover {
  border-bottom-color: #ddd;
  background-color: #ddd;
}

.tab button.active {
  border-bottom-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab">
  <button class="tablinks" (click)="function1()">Tab1</button>
  <button class="tablinks" (click)="function2()">Tab2</button>
</div>

Answer №3

Simply include your CSS code like this:

.tab {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: white;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: blue;
}

.tabcontent {
  display: block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tablinks:focus {border-bottom:1.5px solid blue;}
<div class="tab">
<button class="tablinks" (click)="function1()">Tab1</button>
<button class="tablinks" (click)="function2()">Tab2</button>
</div>

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

Is it possible to modify the color of a division row using an onchange event in JQuery?

I am facing a requirement to dynamically change the color of rows based on the dropdown onchange value. The rows are structured in divisions, which were previously tables. There are two main divisions with rows that need to be updated based on dropdown sel ...

Swap File Field for Picture Graphic - HTML/CSS

I am looking to enhance the appearance of my form by replacing the generic File Field with a more aesthetically pleasing Image Icon. If you click on this Camera Icon, it will open up a Browse window: For a demonstration, check out this JsFiddle link: htt ...

Retrieve Images from URL - Similar to Facebook Thumbnails

I am in the process of creating a website similar to "Reddit." Users will have the option to share URLs, and I would like to use PHP to extract the correct image from these links. What I'm looking for is a more advanced script that can retrieve imag ...

What is the best way to add attractive share buttons for Facebook, Twitter, and G+ on your

I am looking to enhance my social media share buttons on my website, similar to the ones found on YouTube: Currently, I have default buttons that are not visually appealing: <a name="fb_share" type="icon" share_url="<?php the_permalink(); ?>"> ...

The latest bug fix and update in Bootstrap 4.5.2 now includes an updated version of Popper.js. Make sure to use the

Hello fellow developers, I am currently working with npm bootstrap version 4.5.2 and above. However, I am facing an issue with the compatibility of @popperjs/core. If anyone can assist me in resolving the bootstrap.js error temporarily, specifically re ...

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

The Datatable fails to render the JSON data

Currently, I am dynamically binding a DataTable from a JSON URL and also generating headers dynamically. However, I am facing some issues in passing the JSON data to aaData in the DataTable. Can you please take a look at my code snippet below and provide m ...

What is the process for executing a Js file on a website?

I am looking to automate some tasks on a website that I do not own. Specifically, I need to automatically fill out a form and perform certain clicking actions. Can JavaScript be used for this purpose? I am unsure how to run a .js file on a site without the ...

The MediaSource API is not supported on Chrome 27

My current browser version is Chrome 27, and based on this source, it is indicated that the MediaSource API comes pre-installed. However, upon further examination on the same page, the test section states that Your browser does not support the MediaSource ...

Having trouble saving text in a textbox?

Is there a way to store text in a text box for future use? Every time I reload the page, the text in the box disappears. I have attempted the following solution: <td align='left' bgcolor='#cfcfcf'><input type="text" name="tx ...

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

How come my div can alter its own attributes on hover, but its sibling cannot?

As I delve into the realm of web development, my initial project involves creating a portfolio site. However, I am facing difficulties with the dropdown section in one of the menus. I incorporated a :hover pseudo-class to the dropdownhover div to signal ...

The loading icon appears stuck and does not rotate on iOS version 15.3 and above, but functions properly on versions below 15.3

The loading icon does not spin on iOS versions > 15.3 or 16.1, but it works perfectly fine on lower iOS versions for iPhone and iPad, as well as on Android browsers. Below is the CSS code for reference. I've attempted using webkit for Safari and a ...

Script tag causing browser to send unwanted request

Recently, I received some code from a third-party supplier to implement on certain web pages. This code utilizes the jQuery plugin for jTemplates and looks something like this: <script type="text/html" id="item_template"> {#foreach $T.search.results ...

How come an absolutely positioned element does not disregard its sibling's position and appears after it?

<div> is styled flexibly, while <section> is inserted within it and formatted statically. However, <section> shows up underneath the lower right corner of the image, rather than at the upper left corner of its flexible parent. I am strugg ...

Guide on resolving the issue of disabled button's tooltip not appearing upon being hovered over

I have a button that looks like this: <a data-toggle="tab" href="#part4" class="btn btn-info tabcontrol mainbutton col-2 offset-8 disabled" id="part3to4" title="Please acknowledge the checkbox before going next" data-toggle="tooltip" data-html="true" d ...

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

What is the best way to connect information from an HTML input field to a JavaScript object with the help of AngularJS?

As a beginner in AngularJS, I'm struggling to find the best approach to achieve my goal. I aim to create a grid of input tags with type=number in my HTML and have it set up so that whenever the value is increased, a new object is added to a list. Simi ...

Ways to customize hover color of Bootstrap 5 Dropdown menu

I'm having trouble modifying the hover color for a dropdown menu using Bootstrap 5. I'm unsure of the correct method to achieve this. The desired outcome is as follows: However, at the moment it appears like this: Apologies for the oversight, h ...

Tips for creating a clickable popover within a window that remains open but can be closed with an outside click

Is there a way to ensure that my popover window remains clickable inside its own area without closing, but automatically closes when clicked outside of the window? This is the code I am currently using, which is triggered by a button click: if (response. ...