HTML / CSS - 在导航中的活动选项卡底部添加一个小三角形或箭头

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML / CSS - 在导航中的活动选项卡底部添加一个小三角形或箭头相关的知识,希望对你有一定的参考价值。

我需要帮助处理我正在处理的事情:标签显示不同的内容。它是简单的html / CSS,带有一些javascript来帮助选择标签。我创建了一个简单的标签系统,我可以循环浏览所有标签并显示不同的内容。而且我可以使用不同的颜色设置活动选项卡的样式,每当我点击另一个选项卡时,我都会使用Javascript来更改活动选项卡。现在我的问题是,我想在活动标签下方显示一个小箭头。这只是指向内容并显示活动选项卡。我尝试过使用:: before和:: after伪类的一些东西,但我不能让箭头粘在标题标题下面。例如,我希望在'ACADEMICS'下面或在'CHALO LIFE'标题或'SPOTLIGHT'标题下面有一个箭头。如果有人能够帮助我做到这一点,我将不胜感激。

HTML

<div class="indexContainer grayContainer">
    <div class="tabDiv">
       <nav class="tab">
            <ul class="tabMenu">
                <li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
                <li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
                <li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
            </ul>   
        </nav>

        <div id="Academics" class="tabContent default">
            <h3>Academics</h3>
            Talk about our academic programs
        </div>
        <div id="ChaloLife" class="tabContent">
            <h3>Chalo Life</h3>
            Talk about life at Chalo Trust School
        </div>
        <div id="Spotlight" class="tabContent">
            <h3>Spotlight</h3>
            Spotlight on special events or people
        </div>
    </div>
</div>

CSS

.indexContainer {
  width: 100%;
  margin: auto;
  min-height: 350px;
  height: auto;
        }
        .grayContainer {
            background-color: #ededed;
            color: black;
        }
        nav {  
            margin: 0px;

        }

        /*Sets the nav bar in a horizontal manner. Hides the items for the 
 list and ensures there's no scroll bar*/
        nav ul {
            display: flex; 
            flex-direction:row;
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            overflow: hidden;

        }

        /*Styles each of the individual items in the nav bar list. Adds color 
  and changes their font. Adds a border at the end*/
        nav ul li {
            flex-grow: 1;
            font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida 
 Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation 
 Serif",Georgia,serif;
            font-size: 1em;
            font-weight: bolder;
            padding: 0;
        }

        /*Determines how the links inside the navbar will be displayed.Gives 
 them a background color*/
        nav ul li a {
            display: block;
            background: #800000;
            height: 30px;
            text-align:center;
            padding: 7px 10px;
            text-transform: uppercase;
            -webkit-transition:  0.45s;
            transition: 0.45s;

        }
        nav.tab {
            overflow: hidden;
            background: #e4e4e6;
            display: block;
            margin: auto;             
        }

        nav.tab a {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            display: block;
            margin: auto;
            height: 30px;
            vertical-align: middle;
            padding: 20px 16px;
            transition: 0.3s;
            border-right: #000 solid 1px;
            position: relative;
            color: #990000;

        }

        a.tablinks.lastChild{
            border: none;
        }
        a.tablinks:link {
            color: #990000;
            font-weight:bolder;
            font-size: 20px;
            text-transform: capitalize;
        }
        a.tablinks:visited {
            color: #990000;
            font-size: 20px;
            font-weight: 900;
        }

        a.tablinks:hover {
            color: black;
            background: white;

        }
        ul.tabMenu{
            border: none;
            display: flex;
            flex-direction: row;
        }

        a.tablinks.activeTab {
            background-color: #990000;
            color: white;

        }   
        .tabContent {
            display: none;
            padding: 6px 12px;
            border-top: none;
        }
        .default {
            display: block;
        }

JAVASCRIPT

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabContent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabContent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " activeTab";
    return true;
}
答案

试试这个:

function openTab(evt, tabName) {
  // Declare all variables
  var i, tabContent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabContent = document.getElementsByClassName("tabContent");
  for (i = 0; i < tabContent.length; i++) {
      tabContent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" activeTab", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " activeTab";
  return true;
}
.indexContainer {
  width: 100%;
  margin: auto;
  min-height: 350px;
  height: auto;
}
.grayContainer {
    background-color: #ededed;
    color: black;
}
nav {  
    margin: 0px;

}

/*Sets the nav bar in a horizontal manner. Hides the items for the 
list and ensures there's no scroll bar*/
nav ul {
    display: flex; 
    flex-direction:row;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    overflow: hidden;

}

/*Styles each of the individual items in the nav bar list. Adds color 
and changes their font. Adds a border at the end*/
nav ul li {
    flex-grow: 1;
    font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida 
Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation 
Serif",Georgia,serif;
    font-size: 1em;
    font-weight: bolder;
    padding: 0;
}

        /*Determines how the links inside the navbar will be displayed.Gives 
 them a background color*/
nav ul li a {
    display: block;
    background: #800000;
    height: 30px;
    text-align:center;
    padding: 7px 10px;
    text-transform: uppercase;
    -webkit-transition:  0.45s;
    transition: 0.45s;
    
    /* ADD THIS */
    position: relative;
}

/* ADD THIS */
nav ul li a.activeTab::before {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-top: 0;
  border-bottom-color: black;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
/* END ADD */
nav.tab {
    overflow: hidden;
    background: #e4e4e6;
    display: block;
    margin: auto;             
}

nav.tab a {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    display: block;
    margin: auto;
    height: 30px;
    vertical-align: middle;
    padding: 20px 16px;
    transition: 0.3s;
    border-right: #000 solid 1px;
    position: relative;
    color: #990000;

}

a.tablinks.lastChild{
    border: none;
}
a.tablinks:link {
    color: #990000;
    font-weight:bolder;
    font-size: 20px;
    text-transform: capitalize;
}
a.tablinks:visited {
    color: #990000;
    font-size: 20px;
    font-weight: 900;
}

a.tablinks:hover {
    color: black;
    background: white;

}
ul.tabMenu{
    border: none;
    display: flex;
    flex-direction: row;
}

a.tablinks.activeTab {
    background-color: #990000;
    color: white;

}   
.tabContent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}
.default {
    display: block;
}
<div class="indexContainer grayContainer">
    <div class="tabDiv">
       <nav class="tab">
            <ul class="tabMenu">
                <li><a class="tablinks activeTab" onclick=" return openTab(event, 'Academics')" >Academics</a></li>
                <li><a class="tablinks" onclick="return openTab(event, 'ChaloLife')">Chalo Life</a></li>
                <li><a class="tablinks lastChild" onclick="return openTab(event, 'Spotlight')">Spotlight</a></li>
            </ul>   
        </nav>

        <div id="Academics" class="tabContent default">
            <h3>Academics</h3>
            Talk about our academic programs
        </div>
        <div id="ChaloLife" class="tabContent">
            <h3>Chalo Life</h3>
            Talk about life at Chalo Trust School
        </div>
        <div id="Spotlight" class="tabContent">
            <h3>Spotlight</h3>
            Spotlight on special events or people
        </div>
    </div>
</div>

以上是关于HTML / CSS - 在导航中的活动选项卡底部添加一个小三角形或箭头的主要内容,如果未能解决你的问题,请参考以下文章

颤动中的底部导航栏不会在点击选项卡时切换屏幕

使用 router.navigate 时更改导航栏中的活动选项卡

当返回到“导航架构组件”中的同一选项卡时,嵌套片段的状态会丢失

底部导航视图中的每个选项卡单击都会重新加载片段

如何在Hbuilder中制作app底部导航栏

在 React Native 中始终显示底部选项卡导航器 React Navigation 5