HTML/CSS - Fügen Sie ein kleines Dreieck oder einen Pfeil am unteren Rand eines aktiven Tabs in meiner Navigation hinzu

Question

Ich brauche Hilfe mit etwas, an dem ich gerade arbeite: Tabs, um verschiedene Inhalte anzuzeigen. Es ist einfach HTML/CSS mit etwas Javascript, um mit der Tab-Auswahl zu helfen. Ich habe ein einfaches Tab-System erstellt und kann alle Tabs durchlaufen und verschiedene Inhalte anzeigen. Und ich bin in der Lage, die aktive Registerkarte mit einer anderen Farbe zu gestalten, und ich verwende Javascript, um die aktive Registerkarte zu ändern, wenn ich auf eine andere Registerkarte klicke. Nun zu meiner Frage, ich möchte einen kleinen Pfeil unter dem aktiven Tab anzeigen. Das zeigt nur auf den Inhalt und zeigt den aktiven Tab an. Ich habe ein paar Dinge mit den Pseudo-Klassen :: before und :: after ausprobiert, aber ich kann den Pfeil nicht unterhalb der Tab-Überschriften halten. Zum Beispiel möchte ich, dass ein Pfeil unter der "AKADEMIE" oder unter der Überschrift "CHALO LIFE" oder der Überschrift "SPOTLIGHT" erscheint. Wenn mir jemand dabei helfen kann, werde ich es sehr zu schätzen wissen. Der Code und eine Demo sind hier: https://codepen.io/Lombe/pen/mwrQaN

Und ich werde den Code auch hier

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; 
} 

befestigen

Answer 1

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>