我试图搜索有关此效果的教程。我想要的效果是链接下的活动下划线（或边框底部）。当我点击链接时，下划线将滑动到下一个链接，依此类推......一个例子是this question。
我知道我在html中的内容是按钮，而不是导航菜单。所以编码会有所不同。我想我可能需要将按钮转换为导航菜单，如果不能解决的话。
无论如何，问题在于我确实试图使用上面提到的例子来使下划线移动到一个clinked链接。但它不起作用......
这是我的代码，位于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有关。任何帮助或教程都表示赞赏。
答案 0 :(得分：3)
如果可以使用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-->
答案 1 :(得分：1)
结帐，
$(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>
我已对代码进行了更改以使其正常工作。