Sliding CSS Javascript bar

Question

是否可以将列表项下方的蓝色条缩小到单击的列表项的大小，并将其直接定位在其下方？此外，如果单击相反的列表项，该栏将在其下方滑动。这在纯CSS或Vanilla JavaScript上是可能的吗？什么都有帮助，干杯。

.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}

.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
}
#panelCanada,#panelInternational {
display: none;
}

<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>

Answer 1

您可以使用绝对定位，并根据单击li的offsetLeft和offsetWidth更改栏的位置和宽度。

var flip = document.getElementsByClassName("flip"),
bb = document.getElementById("bottombar1");
function clickHandler(el) {
el.addEventListener("click", function() {
var left = this.offsetLeft, width = this.offsetWidth;
bb.style.left = left + "px";
bb.style.width = width + "px";
});
}
for (var i = 0; i < flip.length; i++) {
clickHandler(flip[i]);
}

body {
margin: 0;
padding: 2em;
}
.topnav {
position: relative;
}
.buttons {
list-style-type: none;
margin: 0px auto 0;
padding: 0;
cursor: pointer;
width: 100%;
text-align: center;
overflow: auto;
}
.buttons li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid white;
line-height: 45px;
font-size: 14px;
font-family: Verdana;
font-weight: bolder;
-moz-box-sizing: border-box;
color: #005bab;
background-color: #e2ecf6;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1 {
height: 0.5em;
width: 100%;
background-color: #00688B;
position: absolute;
top: calc(100% + 5px);
transition: left .5s, width .5s;
left: 0;
}
.topnav {
position: relative;
}

<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
<div class="bottombar1" id="bottombar1"></div>
</div>

Answer 2

更灵活的方法是使用 JS，但是是的，CSS，
为什么不...

使用隐藏<input type="radio" id="" name="">，然后使用 CSS 最近的同级~来定位任何所需的近邻同级元素选择器。

触发:checked状态更改的元素是需要放置在 LI 元素内的<label for="">元素：

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
ul.buttons {
padding: 0;
display: flex;
list-style: none;
}
ul.buttons li {
flex: 1;
text-align: center;
color: #005bab;
background-color: #e2ecf6;
}
ul.buttons li label{
display: block;
padding: 16px;
cursor: pointer;
}
ul.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar{
position: relative;
height: 0.5em;
background: #00688B;
width:100%;
left: 0;
transition: 0.6s;
}
/* don't show radio buttons switchers
and content */
input[id^=switch],
[id^=switchContent]{
display:none;
}
/* when :checked, target the nearest sibling bottombar */
#switch1:checked ~ .bottombar{
width: 50%;
left:0;
/*transform: translateX( 0% );*/
}
#switch2:checked ~ .bottombar{
width: 50%;
left: 50%;
/*transform: translateX( 100% );*/
}
/* Show content */
#switch1:checked ~ #switchContent1{
display: block;
}
#switch2:checked ~ #switchContent2{
display: block;
}

<div class="topnav">
<ul class="buttons">
<li><label for="switch1">Canada</label></li>
<li><label for="switch2">International</label></li>
</ul>
</div>
<input id="switch1" type="radio" name="sw_1">
<input id="switch2" type="radio" name="sw_1">
<div class="bottombar"></div>
<div id="switchContent1"><h1>CANADAAA</h1></div>
<div id="switchContent2"><h1>INTERNATIONALLL</h1></div>

Answer 3

这是Luddens Desirs在Vanilla Javascript中的回答。它需要更多的手动劳动，因此对于使用 CCS3 动画来实现如此简单的效果的轻微性能提升，最好使用其他 javascript 动画答案。

// store relevent elements
var can = document.getElementById('can');
var int = document.getElementById('int');
var botBar1 = document.getElementsByClassName('bottombar1')[0];
can.addEventListener("click", function() { 
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toCanada';
});
int.addEventListener("click", function() { 
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toInternational';
});

.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}

.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;

-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s; 
} 

.toInternational{
transform: translate(25%, 0px) scaleX(.5);  
}
.toCanada{
transform: translate(-25%, 0px) scaleX(.5);
}

<script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"></script>
<div class="topnav">
<ul class="buttons">
<li id = "can" class="flip"> Canada</li>
<li id = "int" class="flip">International</li>
</ul>
</div> 
<br style="line-height:49px;"/>
<div class="bottombar1"></div>