单击CSS底部边框 [英] CSS slide bottom border on click
本文介绍了单击CSS底部边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码
HTML -
< div class =menu>
< div class =menu-item active> menu 1< / div>
< div class =menu-item>菜单2< / div>
< div class =menu-item>菜单3< / div>
< / div>
LESS -
.menu-item {
float：left;
border-bottom：2px纯灰色;
margin：0 10px;
padding：0 10px;
光标：指针;
& .active {
border-color：blue;
$ / code $ / pre
$ b $ JS - $ /
$ （），功能（e），功能（），
$（。menu-item {
$（。menu-item）。removeClass（active）;
console.log（yo）;
$（this）.addClass（active） ;
}）;
}）;
在此工作演示 - FIDDLE
所以最初的menu1有底部边框。当我点击menu2时，我如何将底部边框从menu1滑动到menu2？以下是预期功能的示例演示 - DEMO
但上面的演示是使用jQuery实现的。我正在寻找一个纯粹的CSS解决方案。
解决方案
我为此做了一项研究，并且遗憾的是我无法通过纯CSS（包含动态元素和动态宽度），我最终创建了一个jQuery插件，用于此目的与css混合使用，这里是我的jQuery插件
jQuery：
$。fn.RegisterTabBar = function（id）{
var $ ele = $（this）;
if（$ ele.prop（tagName）&& $ ele.prop（tagName）。toLowerCase（）==ul&& id;！= undefined）{
$ ele.attr（data-style-id，id）;
$（< style type ='text / css'>< / style>）。attr（id，id）.appendTo（$（body））; $（li）。on（click，function（）{
var $ li = $（this），
CurrentIndex = $ ele.find（。 （），
ClickedIndex = $ li.addClass（active）。index（）;
函数SetStyle（$ ele，$ （ID == undefined）return;
if（$ ele.Left）{
var ID = $ ele.attr（data-style-id）;
if ）<= 0）{
setTimeout（function（）{SetStyle（$ ele，$ li，IsToLeft）;}，100）;
return;
}
$（style＃+ ID）.text（
ul [data-style-id ='+ ID +'']：before {+
left：+ $ li.position（）。left +px;+
right：+（$ ele.width（） - $ li.position（）。left - $ li.outerWidth（））+px; +
-webkit-transition：left+（IsToLeft？.45s：.8 s）+，右+（IsToLeft？ .9s：.3s）+;+
过渡：+IsToLeft？ ：.3s）+;+
}
）;
}
SetStyle（$ ele，$ li，ClickedIndex< CurrentIndex）;
}）;
}
返回$ ele;
}
CSS：
ul.tab-bar，
ul.tab-bar> li {position：relative; }
ul.tab-bar.bar-style-1：before {background-color：＃00668f; } / *条的颜色* /
ul.tab-bar：在{
display：inline-block;
内容：'';
位置：绝对;
bottom：0;左：0;
height：3px;
z-index：1;
}
ul.tab-bar> li {list-style-type：none; border-width：0; }
ul.tab-bar.bar-style-1> li.active {color：＃00668f; font-weight：700; }
li {
list-style-type：none;
display：inline-block;
border-width：0;
height：40px;
margin：0 20px;
background-color：transparent;
颜色：＃9c9c9c;
text-align：center;
光标：指针;
编辑1 -
以下是纯粹的css版本，它只接受固定数量的项目并通过jQuery切换活动的类
CSS：
ul li {
display：inline-block;
font-weight：bold;
宽度：30％;
padding：7px 0;
text-align：center;
光标：指针;
list-style-type：none;
}
ul li：last-child {
margin：0;
padding：0;
height：7px;
背景：＃00b6ff;
float：left;
}
ul li.active:nth-child（1）〜li：last-child，
ul li：nth-child（1）：hover〜li：last -child {
margin-left：0％;
}
ul li.active:nth-child（2）〜li：last-child，
ul li：nth-child（2）：hover〜li：last -child {
margin-left：30％;
}
ul li.active:nth-child(3）〜li：last-child，
ul li：nth-child（3）：hover〜li：last -child {
margin-left：60％;
}
li：last-child {
-webkit-transition：margin-left 0.2s ease;
-moz-transition：margin-left 0.2s ease;
-o-transition：margin-left 0.2s ease;
过渡：保证金0.2秒缓解;
职位：亲属;
}
试试： https://jsfiddle.net/yqpnckw4/1/
How to slide the bottom border of a menu item on click of that item.
Here is my code
HTML -
<div class="menu">
<div class="menu-item active">menu 1</div>
<div class="menu-item">menu 2</div>
<div class="menu-item">menu 3</div>
</div>
LESS -
.menu-item {
float: left;
border-bottom: 2px solid grey;
margin: 0 10px;
padding: 0 10px;
cursor: pointer;
&.active {
border-color: blue;
}
}
JS -
$(document).ready(function(){
$(".menu-item").on("click", function(e) {
$(".menu-item").removeClass("active");
console.log("yo");
$(this).addClass("active");
});
});
Working demo here - FIDDLE
So initially the "menu1" has the bottom border. When I click on "menu2" how can I SLIDE(animate) the bottom border from "menu1" to "menu2"?
NOTE -
Here is a sample demo of of the intended functionality - DEMO
But the above demo is implemented using jQuery. I am looking for a pure CSS solution.
解决方案
I did a research for this, and the shame is I cannot do it via pure css (with dynamic elements and dynamic width), I finally created a jQuery plugin for this purpose mix with css, here is my jQuery plugin
jQuery:
$.fn.RegisterTabBar = function (id) {
var $ele = $(this);
if ($ele.prop("tagName") && $ele.prop("tagName").toLowerCase() == "ul" && id != undefined) {
$ele.attr("data-style-id", id);
$("<style type='text/css'></style>").attr("id", id).appendTo($("body"));
$ele.find("li").on("click", function () {
var $li = $(this),
CurrentIndex = $ele.find(".active").removeClass("active").index(),
ClickedIndex = $li.addClass("active").index();
function SetStyle($ele, $li, IsToLeft) {
var ID = $ele.attr("data-style-id");
if (ID == undefined) return;
if ($ele.width() <= 0) {
setTimeout(function () { SetStyle($ele, $li, IsToLeft); }, 100);
return;
}
$("style#" + ID).text(
"ul[data-style-id='" + ID + "']:before { " +
"left: " + $li.position().left + "px; " +
"right: " + ($ele.width() - $li.position().left - $li.outerWidth()) + "px; " +
"-webkit-transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
"transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
"} "
);
}
SetStyle($ele, $li, ClickedIndex < CurrentIndex);
});
}
return $ele;
}
CSS:
ul.tab-bar,
ul.tab-bar>li { position: relative; }
ul.tab-bar.bar-style-1:before { background-color: #00668f; } /* Color of the bar*/
ul.tab-bar:before {
display: inline-block;
content: '';
position: absolute;
bottom: 0; left: 0;
height: 3px;
z-index: 1;
}
ul.tab-bar>li { list-style-type: none; border-width: 0; }
ul.tab-bar.bar-style-1>li.active { color: #00668f; font-weight: 700; }
li {
list-style-type: none;
display: inline-block;
border-width: 0;
height: 40px;
margin: 0 20px;
background-color: transparent;
color: #9c9c9c;
text-align: center;
cursor: pointer;
}
try it on https://jsfiddle.net/czf9kjfd/
Edit 1 --
Here is the 'pure' css version which accept only fixed number of items and toggle the active class by jQuery
CSS:
ul li {
display: inline-block;
font-weight: bold;
width: 30%;
padding: 7px 0;
text-align: center;
cursor: pointer;
list-style-type: none;
}
ul li:last-child {
margin: 0;
padding: 0;
height: 7px;
background: #00b6ff;
float: left;
}
ul li.active:nth-child(1) ~ li:last-child,
ul li:nth-child(1):hover ~ li:last-child {
margin-left: 0%;
}
ul li.active:nth-child(2) ~ li:last-child,
ul li:nth-child(2):hover ~ li:last-child {
margin-left: 30%;
}
ul li.active:nth-child(3) ~ li:last-child,
ul li:nth-child(3):hover ~ li:last-child {
margin-left: 60%;
}
li:last-child {
-webkit-transition: margin-left 0.2s ease;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
position: relative;
}
Try on: https://jsfiddle.net/yqpnckw4/1/
这篇关于单击CSS底部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
