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

您可以使用绝对定位并根据您点击的offsetLeft的{{1}}和offsetWidth更改条形的位置和宽度。

＆＃13;

li

＆＃13;

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]);
}

＆＃13;

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;
}

＆＃13;

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>

滑动CSS Javascript栏

3 个答案: