HTML/CSS - ナビゲーション内のアクティブなタブの下部に小さな三角形や矢印を追加します。

Question

私が取り組んでいるものには助けが必要です。タブの選択に役立ついくつかのJavaScript付きのシンプルなHTML/CSSです。私はシンプルなタブシステムを作成しました。私はすべてのタブを繰り返し、さまざまなコンテンツを表示できます。そして私は別の色でアクティブなタブのスタイルを設定することができ、私は別のタブをクリックするたびにアクティブなタブを変更するためにJavaScriptを使用します。 私の質問では、アクティブなタブの下に小さな矢印を表示したいと思います。これは単にコンテンツを指し、アクティブなタブを示します。 :: beforeと:: after擬似クラスを使っていくつか試してみましたが、タブの見出しの下に矢印を付けることができません。たとえば、「ACADEMICS」の下または「CHALO LIFE」見出しまたは「SPOTLIGHT」見出しの下に矢印が表示されます。もし誰かがこれを手助けすることができれば、私は非常に感謝します。 コードとデモはここにある： https://codepen.io/Lombe/pen/mwrQaN

そして、私はここにコードを添付しますあまりにも

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

Answer 1

これを試してみてください：本当に実行するために何もないので、

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>