I need help with something I’m working on: tabs to show different content. It’s simple HTML/CSS with some javascript to help with the tab selection. I have created a simple tab system and I’m able to cycle through all the tabs and show different content. And I’m able to style the active tab with a different color and I use Javascript to change the active tab whenever I click on another tab. Now for my question, I want to display a little arrow below the active tab. Which just points to the content and shows the active tab. I’ve tried a few things using the ::before and ::after pseudo classes but I can’t get the arrow to stick below the tab headings. For example, I want there to be an arrow below the ‘ACADEMICS’ or below the ‘CHALO LIFE’ heading or the ‘SPOTLIGHT’ heading. If anyone is able to help me do this, I will greatly appreciate.
HTML
<div class="indexContainer grayContainer">
<div class="tabDiv">
<nav class="tab">
<ul class="tabMenu">
<li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
<li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
<li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
</ul>
</nav>
<div id="Academics" class="tabContent default">
<h3>Academics</h3>
Talk about our academic programs
</div>
<div id="ChaloLife" class="tabContent">
<h3>Chalo Life</h3>
Talk about life at Chalo Trust School
</div>
<div id="Spotlight" class="tabContent">
<h3>Spotlight</h3>
Spotlight on special events or people
</div>
</div>
</div>
CSS
.indexContainer {
width: 100%;
margin: auto;
min-height: 350px;
height: auto;
}
.grayContainer {
background-color: #ededed;
color: black;
}
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the items for the
list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
/*Styles each of the individual items in the nav bar list. Adds color
and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation
Serif",Georgia,serif;
font-size: 1em;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives
them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 30px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
nav.tab {
overflow: hidden;
background: #e4e4e6;
display: block;
margin: auto;
}
nav.tab a {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: auto;
height: 30px;
vertical-align: middle;
padding: 20px 16px;
transition: 0.3s;
border-right: #000 solid 1px;
position: relative;
color: #990000;
}
a.tablinks.lastChild{
border: none;
}
a.tablinks:link {
color: #990000;
font-weight:bolder;
font-size: 20px;
text-transform: capitalize;
}
a.tablinks:visited {
color: #990000;
font-size: 20px;
font-weight: 900;
}
a.tablinks:hover {
color: black;
background: white;
}
ul.tabMenu{
border: none;
display: flex;
flex-direction: row;
}
a.tablinks.activeTab {
background-color: #990000;
color: white;
}
.tabContent {
display: none;
padding: 6px 12px;
border-top: none;
}
.default {
display: block;
}
JAVASCRIPT
function openTab(evt, tabName) {
// Declare all variables
var i, tabContent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabContent = document.getElementsByClassName("tabContent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " activeTab";
return true;
}
Advertisement
Answer
Try this:
function openTab(evt, tabName) {
// Declare all variables
var i, tabContent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabContent = document.getElementsByClassName("tabContent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " activeTab";
return true;
}.indexContainer {
width: 100%;
margin: auto;
min-height: 350px;
height: auto;
}
.grayContainer {
background-color: #ededed;
color: black;
}
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the items for the
list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
/*Styles each of the individual items in the nav bar list. Adds color
and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation
Serif",Georgia,serif;
font-size: 1em;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives
them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 30px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
/* ADD THIS */
position: relative;
}
/* ADD THIS */
nav ul li a.activeTab::before {
content: '';
position: absolute;
border: 10px solid transparent;
border-top: 0;
border-bottom-color: black;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
/* END ADD */
nav.tab {
overflow: hidden;
background: #e4e4e6;
display: block;
margin: auto;
}
nav.tab a {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
display: block;
margin: auto;
height: 30px;
vertical-align: middle;
padding: 20px 16px;
transition: 0.3s;
border-right: #000 solid 1px;
position: relative;
color: #990000;
}
a.tablinks.lastChild{
border: none;
}
a.tablinks:link {
color: #990000;
font-weight:bolder;
font-size: 20px;
text-transform: capitalize;
}
a.tablinks:visited {
color: #990000;
font-size: 20px;
font-weight: 900;
}
a.tablinks:hover {
color: black;
background: white;
}
ul.tabMenu{
border: none;
display: flex;
flex-direction: row;
}
a.tablinks.activeTab {
background-color: #990000;
color: white;
}
.tabContent {
display: none;
padding: 6px 12px;
border-top: none;
}
.default {
display: block;
}<div class="indexContainer grayContainer">
<div class="tabDiv">
<nav class="tab">
<ul class="tabMenu">
<li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
<li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
<li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
</ul>
</nav>
<div id="Academics" class="tabContent default">
<h3>Academics</h3>
Talk about our academic programs
</div>
<div id="ChaloLife" class="tabContent">
<h3>Chalo Life</h3>
Talk about life at Chalo Trust School
</div>
<div id="Spotlight" class="tabContent">
<h3>Spotlight</h3>
Spotlight on special events or people
</div>
</div>
</div>