Question

我正在尝试为我的网页创建一个“可切换标签”导航栏。我已经想出了如何通过遵循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>

好的，所以我发现通过检查页面使用边框底部的元素，然后是向上箭头的图像

如果图片处于活动状态时如何显示在标签上？

Answer 1

将新课程添加到＆lt;李＆GT; element（＆＃34; active＆＃34;例如）并使用image设置样式（class :: after）。然后使用Javascript（如果你在你的网站上使用jQuery也会很好）并在点击其他菜单元素时删除这个类（也将这个类添加到被点击的元素）。

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上添加图像

2 个答案: