0
我需要关于我正在处理的某些内容的帮助:用于显示不同内容的选项卡。这是简单的HTML/CSS与一些JavaScript来帮助选择选项卡。我创建了一个简单的选项卡系统,我可以遍历所有选项卡并显示不同的内容。我可以使用不同的颜色设置活动选项卡,并且每当我点击另一个选项卡时,我都会使用Javascript来更改活动选项卡。 现在对于我的问题,我想在活动选项卡下面显示一个小箭头。它只是指向内容并显示活动选项卡。我已经尝试了一些使用:: before和:: after伪类的东西,但是我无法将箭头粘到标签标题下面。例如,我希望在那里有一个箭头在'大学学院'的下方,或者低于'CHALO LIFE'标题或'SPOTLIGHT'标题。如果有人能够帮助我做到这一点,我将不胜感激。 代码和演示在这里: https://codepen.io/Lombe/pen/mwrQaNHTML/CSS - 将一个小三角形或箭头添加到我的导航中活动选项卡的底部
而且我会在这里附上代码太
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;
}
可能会更好,而不是格式化片断这是只是普通的代码,因为没有什么真正运行。或者用一些HTML来说明;那会更好。 – cjl750
是的,复制代码并添加了我的。 – cyrix
谢谢你。现在,事情是,我想让箭头面对另一种方式。并在导航项下方。像这样http://imgur.com/JPsG7ly – Lombe