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

What is the best way to generate an array from JSON data while ensuring that the values are not duplicated?

`Is there a way to modify the attribute text of a JSON in jQuery?`

Incorporate an external CSS file programmatically

What is the reason for Firefox displaying the "excessive recursion" error message?

Creating a multi-page app using React: A comprehensive guide

Using Angular to fetch API response and convert it into a promise

Is there a way to automatically change specific characters as a user types in an input field?

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

How can JavaScript effectively retrieve the JPEG comment from a JPEG file?

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Utilizing PHP to send arrays through AJAX and JSON

How to eliminate blinking in Ajax refresh upon successful completion

Error in JScript encountered during the downgrade to .NET Framework 2.0

How to incorporate material-ui tabs in nextjs framework?

The JSON response from Ajax is not coming back as anticipated

Is it possible to enclose an image with two <div> tags in a single line?

Increasing box width in Django

Printing in ASP.Net without displaying a dialog box

Obtaining the attribute value of a disabled element in an Angular JS application

Crystal Reports does not recognize or integrate HTML elements