Remove the bottom border from the active tab by utilizing the <div> and <a> elements

Question

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

I am facing an issue with a tabbed menu on my webpage. While the menu is functioning correctly, I am struggling to remove the bottom border from the active tab.

You can view all of my test code here.

While I have come across solutions using <ul> and <li> for creating tabs, my implementation relies on <div> and <a> tags. The solutions provided for list tags do not seem to work in this case.

Currently, my code appears like this: https://i.stack.imgur.com/RL3bo.png

However, I want it to resemble more like this:

https://i.stack.imgur.com/Fwobz.png

Any guidance would be appreciated. Thank you.

javascript html css

Answer 1

Answer №1

If you want to avoid using border-bottom on your .tab bar (which will position the border line below your tabs), you can utilize a pseudo element to place the line underneath your tabs so they blend in with their white background. Check out the live demo below.

(I've included your code within Stack Overflow and made some modifications. Remember to provide all code in your question instead of linking to an external source next time.)

/* Styling for the tab */

div.tab {
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

/* Custom styling for the bottom border */

div.tab::before {
  content: '';
  background-color: #ccc;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Styling for the buttons inside the tab */

div.tab a {
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  position: relative;
}

/* Changing background color of buttons on hover */

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

/* Defining an active/current tablink class */

div.tab a.active {
  background-color: #fff;
  border-top: 3px solid rgb(30, 18, 197);
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* Styling for the tab content */

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

<script src="https://thimble.mozilla.org/resources/remix/index.js" type="text/javascript"></script>

<div class="tab">
  <a class="tablinks" onclick="openCity(event, 'London')">London</a>
  <a class="tablinks" onclick="openCity(event, 'Paris')">Paris</a>
  <a class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script src="https://thimbleprojects.org/soopergenius/365314/scripts.js" type="text/javascript"></script>

Answer 2

If you want to avoid using border-bottom on your .tab bar (which will position the border line below your tabs), you can utilize a pseudo element to place the line underneath your tabs so they blend in with their white background. Check out the live demo below.

(I've included your code within Stack Overflow and made some modifications. Remember to provide all code in your question instead of linking to an external source next time.)

/* Styling for the tab */

div.tab {
  overflow: hidden;
  background-color: #fff;
  position: relative;
}

/* Custom styling for the bottom border */

div.tab::before {
  content: '';
  background-color: #ccc;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Styling for the buttons inside the tab */

div.tab a {
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  position: relative;
}

/* Changing background color of buttons on hover */

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

/* Defining an active/current tablink class */

div.tab a.active {
  background-color: #fff;
  border-top: 3px solid rgb(30, 18, 197);
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* Styling for the tab content */

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

<script src="https://thimble.mozilla.org/resources/remix/index.js" type="text/javascript"></script>

<div class="tab">
  <a class="tablinks" onclick="openCity(event, 'London')">London</a>
  <a class="tablinks" onclick="openCity(event, 'Paris')">Paris</a>
  <a class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script src="https://thimbleprojects.org/soopergenius/365314/scripts.js" type="text/javascript"></script>

Answer 3

Answer №2

A quick and simple solution:

delete the following line from div.tab{

border-bottom: 1px solid #ccc;

remove this line from .tabcontent

border-top: none;

insert these lines into .tabcontent

border-top: 1px solid #ccc;
margin-top: -1px;

lastly, include this line in div.tab a.active

border-bottom: 1px solid #fff;

Answer 4

A quick and simple solution:

delete the following line from div.tab{

border-bottom: 1px solid #ccc;

remove this line from .tabcontent

border-top: none;

insert these lines into .tabcontent

border-top: 1px solid #ccc;
margin-top: -1px;

lastly, include this line in div.tab a.active

border-bottom: 1px solid #fff;

Answer 5

Answer №3

To create a unique effect, you could try positioning the tab so that it overlaps the <div> below it. Make sure to set the active tab's class to position:absolute and adjust the height of the tab to prevent the side borders from interfering with the content below. This technique was quickly developed using the Chrome console, so make sure to thoroughly test it within your design.

https://i.stack.imgur.com/vh8IP.png https://i.stack.imgur.com/71yKX.png

Answer 6

To create a unique effect, you could try positioning the tab so that it overlaps the <div> below it. Make sure to set the active tab's class to position:absolute and adjust the height of the tab to prevent the side borders from interfering with the content below. This technique was quickly developed using the Chrome console, so make sure to thoroughly test it within your design.

https://i.stack.imgur.com/vh8IP.png https://i.stack.imgur.com/71yKX.png

Remove the bottom border from the active tab by utilizing the <div> and <a> elements

Answer №1

Answer №2

Answer №3

Similar questions

Ways to compare UTC timestamps using JavaScript

Experiencing difficulties with Magento operations

Streaming video to multiple clients concurrently using NodeJS

Google Maps is experiencing difficulties maintaining its longitude and latitude coordinates within the Bootstrap tabbed user interface

Attempting to select an image with the intention of triggering a modal to appear through an ajax

Can JavaScript bypass the need for an html page and go directly to the printing process?

Optimizing HTML/CSS performance: Comparing flexbox and tables for handling extensive datasets

Creating a Striking Multi-Layered CSS Header

Bootstrap form toggle switch component for ReactJS

Separate modules in the Webpack.mix.js file don't produce any output files in the public folder

Connecting the value of one input to influence another input

How does the single-threaded nature of Node.js handle an abundance of concurrent requests?

The CKEditor is having trouble properly opening code snippets

Is the CSS scale activated by mouseover or click?

Set a div to have both absolute positioning and sticky behavior

Tips for arranging letters on separate lines using CSS

Listening for position changes using jQuery events

Exploring JSON data structures using autocomplete functionalities

Trying to call an applet method using JavaScript will not be successful

The Next.js page suddenly disappears after a moment