在按钮中添加下划线滑动过渡

Question

我试图搜索有关此效果的教程。我想要的效果是链接下的活动下划线（或边框底部）。当我点击一个链接时，下划线会滑到下一个链接等等......一个例子是this question.

我知道我在 html 中拥有的是按钮，而不是导航菜单。所以编码会有所不同。我在想，如果它不起作用，我可能需要将按钮转换为导航菜单。

无论如何，问题是我确实尝试使用上面提到的示例使下划线移动到点击链接。但它不起作用......

这是我在 codepen 上的代码。

$(document).ready(function() {
  
  $(".con-button").click(function(){
    if(this.id == "c-all") {
      $(".con-button").removeClass("active");
      $("#c-all").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').fadeIn("slow").show();
    } else if (this.id == "c-online") {
      $(".con-button").removeClass("active");
      $("#c-online").addClass("active");
      $('.offline').hide();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').hide();
    } else if (this.id == "c-offline") {
      $(".con-button").removeClass("active");
      $("#c-offline").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
    $('.online').hide();
      $('.none').hide();
    }
  })
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";

function getSteams() {
  
  channels.forEach(function(indchannel) {
  //for (var channel in channels) {
    //var indchannel = channel;
  var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
    
  var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
  
  $.ajax({
      url: streamURL,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    headers: {
      "Accept": "application/vnd.twitchtv.v5+json",
    },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        
        $.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
          if(data2.status == 404) {
            game = "The Account doesn't exist";
        status = "none";
          } else {
            game = "Offline";
        status = "offline";
          }
          
          $("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
          
        } );
        
      } else {
        game = data.stream.game;
        status = "online";
        
        $("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
        
      };
      
       
    }
  
  
  });
  });
}

html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.controls {
  position: relative;
  width: 100%;
}
.con-button {
  position: relative;
  background-color: white;
  border: none;
    margin: 0.5em 0 0 0;
    padding: 0.5em 1em 0.5em 1em;
  text-align: center;
    color: rgb(100,65,164);
  font-size: 20px;
  transition: .4s;
}
.con-button:hover {
  cursor: pointer;
  /*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
  position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
 .controls .effect {
   /*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
   height: 2px;
    bottom: 5px;
    background: #6441A4;
    margin-left:/*-45px*/auto;
    margin-right:/*-45px*/auto;
   width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
  border-top: 1px solid #6441A4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button active" type="button">All</button>
                <button id="c-online" class="con-button" type="button">Online</button>
                <button id="c-offline" class="con-button" type="button">Offline</button>    
        </div>
        <div class="divider"><hr></div>
        <div id="online"></div>
        <div id="offline"></div>
      </div>
    </div>
  </div>
</div>

我确保

.active

在 Javascript 中工作，但我仍然需要帮助使下划线在单击时从一个链接移动到另一个链接。我所知道的是它与 CSS 有关。任何帮助或教程表示赞赏。

Answer 1

如果你会使用 jQuery，你就可以使用这个简单的技术。它非常通用，您可以使用任何 html 元素，无论是导航、按钮还是简单的 div。你只需要有一个包含所有链接的外部元素。

想法是找到被点击的锚标签的位置和宽度，然后将相同的（或添加一些修改后）应用于

underline

元素。为了使其运动平滑，您可以为这个

transition

元素的

left

和

width

属性添加

underline

。

$("#outer-container a").on("click", function(e){
  e.preventDefault();
  var cssObj = {};
  cssObj.left = $(this).position().left;
  cssObj.width = $(this).outerWidth();
  $("#outer-container #underline").css( cssObj );
});//a click()
$("#outer-container a").eq(0).trigger("click");

#outer-container
{
 text-align: center;
 position: relative;
}
#outer-container a
{
 color: #333;
 display: inline-block;
 padding: 0 10px;
 text-decoration: none;
}
#outer-container #underline
{
 content: "";
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 100px;
 background-color: #333;
 transition: left 0.3s ease, width 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="outer-container">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
  
  <span id="underline"></span>
</div><!--#outer-container-->

Answer 2

检查这个，

$(document).ready(function() {
  
  $(".con-button").click(function(){
    if(this.id == "c-all") {
      $(".con-button").removeClass("active");
      $("#c-all").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').fadeIn("slow").show();
    } else if (this.id == "c-online") {
      $(".con-button").removeClass("active");
      $("#c-online").addClass("active");
      $('.offline').hide();
      $('.online').hide();
    $('.online').fadeIn("slow").show();
      $('.none').hide();
    } else if (this.id == "c-offline") {
      $(".con-button").removeClass("active");
      $("#c-offline").addClass("active");
      $('.offline').hide();
      $('.offline').fadeIn("slow").show();
    $('.online').hide();
      $('.none').hide();
    }
  })
  
  getSteams();
  
});

var channels = ["BasicallyIDoWrk", "FreeCodeCamp", "Golgothus", "maatukka", "Vinesauce", "brunofin", "comster404", "OgamingSC2"];

  var cb = "?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?";

function getSteams() {
  
  channels.forEach(function(indchannel) {
  //for (var channel in channels) {
    //var indchannel = channel;
  var streamURL = "https://api.twitch.tv/kraken/streams/" + indchannel + cb;
    
  var channelURL = "https://api.twitch.tv/kraken/channels/" + indchannel + cb;
  
  $.ajax({
      url: streamURL,
      type: 'GET',
      dataType: "jsonp",
      data: {
        //action: 'query',
        format: 'json',
      },
    headers: {
      "Accept": "application/vnd.twitchtv.v5+json",
    },
    success: function(data) {
    
      var game;
      var status;
      
      if(data.stream === null) {
        
        $.getJSON(data._links.channel + "/?client_id=egn4k1eja0yterrcuu411n5e329rd3&callback=?", function(data2) {
          if(data2.status == 404) {
            game = "The Account doesn't exist";
        status = "none";
          } else {
            game = "Offline";
        status = "offline";
          }
          
          $("#offline").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
          
        } );
        
      } else {
        game = data.stream.game;
        status = "online";
        
        $("#online").append('<div class="indbox ' + status + '"><a target="_blank" href="#">'+ indchannel + '<br/>' + game +'</a></div>');
        
      };
      
       
    }
  
  
  });
  });
}

html, body{
  height:100%;
  margin: 0;
  background-color: #ffffff;
}
.wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.container {
  width: 75%;
  margin: 30px auto 0;
  position: relative;
}
.logobox img {
  width: 20%;
  margin: 0 auto;
}
.controls {
  position: relative;
  width: 100%;
}
.con-button {
  position: relative;
  background-color: white;
  border: none;
	margin: 0.5em 0 0 0;
	padding: 0.5em 1em 0.5em 1em;
  text-align: center;
	color: rgb(100,65,164);
  font-size: 20px;
  transition: .4s;
}
.con-button:hover {
  cursor: pointer;
  /*border-bottom: 3px solid rgba(224, 217, 236, 1);*/
}
.con-button:focus {outline: 0;}
.effect {
  position: absolute;
    left: 0;
    transition: 0.4s ease-in-out;
}
 .controls .effect {
   /*border-bottom: 3px solid rgba(100, 65, 164, 1);*/
   height: 2px;
    bottom: 5px;
    background: #6441A4;
    margin-left:/*-45px*/auto;
    margin-right:/*-45px*/auto;
   width: 33%;
}
button:nth-child(1).active ~ .effect {left: 0%;}
button:nth-child(2).active ~ .effect {left: 33%;}
button:nth-child(3).active ~ .effect {left: 66%;}
.divider hr {
  border-top: 1px solid #6441A4;
}
.effect {
    position: absolute;
    left: 18%;
    transition: 0.4s ease-in-out;
}
.controls button:nth-child(1).active ~ .effect {
    left: 28%;
    /* the middle of the first <a> */
}
.controls button:nth-child(2).active ~ .effect {
    left: 50%;
    /* the middle of the second <a> */
}
.controls button:nth-child(3).active ~ .effect {
    left: 77%;
    /* the middle of the third <a> */
}
.controls button:nth-child(4).active ~ .effect {
    left: 93.5%;
    /* the middle of the forth <a> */
}
.controls .effect {
    width: 55px;
    height: 2px;
    bottom: 5px;
    background: #00ABE8;
    margin-left:-45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="twitchtvarea">
      <div class="logobox">
        <img src="https://s6.postimg.org/bay7stotd/Twitch_Purple_RGB.png" />
      </div>
      <div class="twitchbox">
        <div class="controls">
          <button id="c-all" class="con-button active" type="button">All</button>
				<button id="c-online" class="con-button" type="button">Online</button>
				<button id="c-offline" class="con-button" type="button">Offline</button>	
          <div class="effect"></div>
        </div>
        <div class="divider"><hr></div>
        <div id="online"></div>
        <div id="offline"></div>
      </div>
    </div>
  </div>
</div>

我已经对您的代码进行了更改以使其正常工作。