html - 从输入到列表项的指针
问题描述
我有一小段代码在一个 div 中有一个无序列表,在下面的一个 div 中有一个输入,为列表项创建了一个有点“选项卡式”的界面。这就是我想要的,但我试图弄清楚如何从输入顶部创建一个指向相应列表项的指针。
如果我单击公共项目,我想要一个从输入指向“公共”的箭头,对于内部也是如此。
像这样的东西:
我尝试了一些边框方法,但没有什么能让我接近,因为我希望它本质上是从输入的边框创建的。
我怎样才能做到这一点?
.tabs{
margin-top: 30px;
user-select: none;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: flex;
font-size: 1rem;
-webkit-box-pack: justify;
justify-content: space-between;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.tabs ul{
-webkit-box-align: center;
align-items: center;
border-bottom: 1px solid #dbdbdb;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
flex-shrink: 0;
-webkit-box-pack: start;
justify-content: flex-start;
list-style: none;
padding:0px !important;
}
.tabs li{
display:block;
text-align:center !important;
margin-left:15px;
margin-bottom:-.15em;
}
.tabs li.is-active a{
border-bottom: 2px solid black;
color:black;
}
.tabs a.is-active {
border-bottom:2px solid black;
}
.tabs a:hover{
border-bottom: 2px solid black;
}
<div class="row notesInput">
<div class="col-lg-12">
<div class="tabs">
<ul style="border-bottom:none !important; text-decoration:none">
<li>Public</li>
<li>Internal</li>
</ul>
</div>
<div>
<input type="text" name="public">
</div>
</div>
</div>
我试过的:
.tabs {
margin-top: 30px;
user-select: none;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: flex;
font-size: 1rem;
-webkit-box-pack: justify;
justify-content: space-between;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.tabs ul {
-webkit-box-align: center;
align-items: center;
border-bottom: 1px solid #dbdbdb;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
flex-shrink: 0;
-webkit-box-pack: start;
justify-content: flex-start;
list-style: none;
padding: 0px !important;
}
.tabs li {
display: block;
text-align: center !important;
margin-left: 15px;
margin-bottom: -.15em;
}
.tabs li.is-active a {
border-bottom: 2px solid black;
color: black;
}
.tabs a.is-active {
border-bottom: 2px solid black;
}
.tabs a:hover {
border-bottom: 2px solid black;
}
input {
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
<div class="row notesInput">
<div class="col-lg-12">
<div class="tabs">
<ul style="border-bottom:none !important; text-decoration:none">
<li>Public</li>
<li>Internal</li>
</ul>
</div>
<div>
<input type="text" name="public">
</div>
</div>
</div>
解决方案
:before
您可以为 each使用伪元素<li>
。所以,你可以应用边框、背景和旋转这个伪元素transform: rotate()
来创建你想要的三角形形式。最后,将其放置在靠近输入的位置。
对 CSS 进行了一些更改,例如在输入上应用边框overflow and overflow-x
并被删除。
.active
类用于切换 li 选择,将content
伪元素的属性从''
更改为none
。
document.querySelectorAll('.tabs ul li').forEach(function(li) {
li.addEventListener('click', function() {
if (this.classList.contains('active')) {
return;
};
document.querySelector('.tabs .active').classList.remove('active');
this.classList.add('active');
})
})
.tabs{
margin-top: 30px;
user-select: none;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
display: flex;
font-size: 1rem;
-webkit-box-pack: justify;
justify-content: space-between;
white-space: nowrap;
}
.tabs ul{
-webkit-box-align: center;
align-items: center;
border-bottom: 1px solid #dbdbdb;
display: flex;
-webkit-box-flex: 1;
flex-grow: 1;
flex-shrink: 0;
-webkit-box-pack: start;
justify-content: flex-start;
list-style: none;
padding:0px !important;
}
.tabs li {
display:block;
text-align:center !important;
margin-left:15px;
margin-bottom:-.15em;
position: relative;
}
.tabs li:before {
content: none;
position: absolute;
height: 8px;
width: 8px;
background-color: #ffffff;
transform: rotate(45deg);
border-left: 1px solid #8c8c8c;
border-top: 1px solid #8c8c8c;
bottom: -18px;
left: calc(50% - 3px);
}
.tabs li.active:before {
content: '';
}
.tabs li.is-active a{
border-bottom: 2px solid black;
color:black;
}
.tabs a.is-active {
border-bottom:2px solid black;
}
.tabs a:hover{
border-bottom: 2px solid black;
}
.input input {
border: 1px solid #8c8c8c;
}
<div class="row notesInput">
<div class="col-lg-12">
<div class="tabs">
<ul style="border-bottom:none !important; text-decoration:none">
<li class="active">Public</li>
<li>Internal</li>
</ul>
</div>
<div class="input">
<input type="text" name="public">
</div>
</div>
</div>
推荐阅读
- python - 使用自定义表单字段时出现 AttributeError
- c# - 对数据库的查询返回空或 null 但保存数据确实有效
- arrays - 从 golang 模板调用数组的方法
- php - PHP 正则表达式匹配所有,除非包含逗号
- go - JSON解码值被视为float64而不是int
- typescript - 不可分配给类型“字符串”。类型 'void' 不可分配给类型 'string'
- javascript - 在画布的同位点上对两种类型的节点进行分组
- node.js - node.js express:如何制作文件夹选择器?
- c - code::blocks 动画/自动单步源
- php - 删除关联数组中的父元素