在活动的可切换标签上添加图像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

回答

相关问题