アクティブなトグル可能なタブに画像を追加するHTML/CSS

Question

私のウェブページに「トグルタブ」ナビゲーションバーを作成しようとしています。私はw3schoolsのチュートリアルに従うことによってtogglableタブを作成する方法を考え出しましたが、その外観を変更して下の画像のようなアクティブなタブを指す上向きの矢印を持つようにする方法を見つけようとしていません。誰もこれを達成する方法を知っていますか？ここで

は、タグの私のコードです：

<ul class="navtabs"> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'about')">About</a></li> 
 
     <li><a href="study.html">How to Study</a></li> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'help')">Helpful Links</a></li> 
 
     <li><a href="#" class="tablinks" onclick="openLink(event, 'comment')">Comments</a></li> 
 
    </ul> 
 
    
 
    <div id="about"> 
 
     <h1>About</h1> 
 
     <p>HERE IS A DESCRIPTION OF ABOUT THE SITE YADAYADA</p> 
 
    </div> 
 
    <div id="help"> 
 
     <h1>Helpful Links</h1> 
 
     <p>THERE WILL BE LINKS HERE JUST U WAIT</p> 
 
    </div> 
 
    <div id="comment"> 
 
     <h1>Comments</h1> 
 
     <p>U CAN LEAVE COMMENTS HERE ABOUT UR OWN TIPS/TRICKS FOR STUDYING</p> 
 
    </div> 
 

 
    <script> 
 
     function openLink(evt, linkName){ 
 
      var i, tabcontent, tablinks; 
 
      tabcontent = document.getElementsByClassName("tabcontent"); 
 
      for(i = 0; i < tabcontent.length; i++){ 
 
       tabcontent[i].style.display = "none"; 
 
      } 
 
      tablinks = document.getElementsByClassName("tablinks"); 
 
      for(i = 0; i < tablinks.length; i++){ 
 
       tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
      } 
 
      document.getElementById(linkName).style.display = "block"; 
 
      evt.currentTarget.className += " active"; 
 
     } 
 
    </script>

がわかりましたので、私はページが使用する要素の検査で発見のborder-bottomとのこの画像上向き矢印

アクティブなときに画像をタブに表示するにはどうすればよいですか？

Answer 1

私はこの結果を得るだけでCSS

ul.navtabs li a:focus, .active{ 
 
    background-image: url(../../arrow.png); 
 
    background-position-x: center; 
 
    background-position-y: bottom; 
 
    background-size: initial; 
 
    background-repeat: no-repeat; 
 
    
 
}

にこれを追加することによって、それを考え出した：

今

私が持っているがborder.pngの周りをボトムラップする方法を見つけてください。もし誰かがそれをどうやってやるのか分かっていれば、私はそれを高く評価します。しかし、私はそれを回避することは難しいと思っています。

Answer 2

新しいクラスを< li>要素（「アクティブ」など）に追加し、イメージ（class :: after）をイメージでスタイル設定します。次に、他のメニュー要素がクリックされたときにこのクラスを削除します（このクラスをクリックした要素に追加します）。Javascriptを使用します（jQueryはWebサイトで使用する場合にも便利です）。