在活動的可切換標籤上添加圖像HTML/CSS

我正在爲我的網頁創建一個「可切換標籤」導航欄。我已經想出瞭如何通過遵循w3schools教程創建可切換選項卡，但我並不想弄清楚如何修改其外觀，以便它具有指向活動選項卡的向上箭頭，如下圖所示。有誰知道一種方法來實現這一目標？在活動的可切換標籤上添加圖像HTML/CSS

這裏是我的標籤代碼：

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

好了，所以我通過檢查元素的網頁使用發現的無邊框，底部，然後這個的圖片向上箭頭

如何在圖片在活動時出現在選項卡上？

來源

2016-09-22 crin

我已經想通了通過簡單地添加這個到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; 
 
    
 
}

我得到這樣的結果：

現在我得弄清楚如何在arrow.png附近製作邊框底部包裝。如果任何人有任何想法如何做到這一點，我將不勝感激。不過，我認爲要弄清楚解決方法並不難。

來源

2016-09-22 18:38:16 crin

將圖像添加到< li> element（「active」，例如）並將其設置爲style（class :: after）。然後使用Javascript（如果你在你的網站上使用它，jQuery也會很好），當其他菜單元素被點擊時（也可以將這個類添加到單擊的元素中）刪除這個類。

來源

2016-09-22 17:48:23

在活動的可切換標籤上添加圖像HTML/CSS

回答

相關問題