按钮中的下划线滑动转换

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; 
 
\t margin: 0.5em 0 0 0; 
 
\t padding: 0.5em 1em 0.5em 1em; 
 
    text-align: center; 
 
\t 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> 
 
\t \t \t \t <button id="c-online" class="con-button" type="button">Online</button> 
 
\t \t \t \t <button id="c-offline" class="con-button" type="button">Offline</button> \t 
 
     </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元素。要使其运动平滑，您可以为添加元素的left和width属性。

$("#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; 
 
\t margin: 0.5em 0 0 0; 
 
\t padding: 0.5em 1em 0.5em 1em; 
 
    text-align: center; 
 
\t 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> 
 
\t \t \t \t <button id="c-online" class="con-button" type="button">Online</button> 
 
\t \t \t \t <button id="c-offline" class="con-button" type="button">Offline</button> \t 
 
      <div class="effect"></div> 
 
     </div> 
 
     <div class="divider"><hr></div> 
 
     <div id="online"></div> 
 
     <div id="offline"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我已经在你的代码进行了修改，使其工作。