在活动的、可切换的选项卡上添加图像 HTML/CSS

Question

我正在尝试为我的网页创建一个 "togglable tab" 导航栏。我已经按照 w3schools 教程弄清楚了如何创建可切换选项卡，但我并不是想弄清楚如何修改它的外观，以便它有一个向上箭头指向活动选项卡，如下图所示。有谁知道实现这一目标的方法？

这是我的标签代码：

    <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

将新的 class 添加到

元素（例如 "active"）并使用图像设置样式（class::after）。然后使用 Javascript（如果您在您的网站上使用 jQuery 也会很好）并在单击其他菜单元素时删除此 class（也将此 class 添加到单击的元素）。

Answer 2

我已经通过简单地将其添加到 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。如果有人知道如何做到这一点，我将不胜感激。不过，我认为找出解决方法并不难。

在活动的、可切换的选项卡上添加图像 HTML/CSS

Add image on active, togglable tab HTML/CSS

html

css

navigation

uinavigationbar