Javascript 在按钮中为幻灯片过渡添加下划线

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

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

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

这是我的密码

$（文档）.ready（函数（）{
$（“.con按钮”）。单击（函数（）{
如果（this.id==“c-all”）{
$（“.con按钮”）.removeClass（“活动”）；
$（“#c-all”）.addClass（“活动”）；
$（'.offline'）.hide（）；
$（'.offline'）.fadeIn（“slow”）.show（）；
$（'.online'）.hide（）；
$（'.online'）.fadeIn（“slow”）.show（）；
$（'.none'）.fadeIn（“慢”）.show（）；
}else if（this.id==“c-online”）{
$（“.con按钮”）.removeClass（“活动”）；
$（“#c-online”）.addClass（“活动”）；
$（'.offline'）.hide（）；
$（'.online'）.hide（）；
$（'.online'）.fadeIn（“slow”）.show（）；
$（'.none'）.hide（）；
}else if（this.id==“c-offline”）{
$（“.con按钮”）.removeClass（“活动”）；
$（“#c-offline”）.addClass（“活动”）；
$（'.offline'）.hide（）；
$（'.offline'）.fadeIn（“slow”）.show（）；
$（'.online'）.hide（）；
$（'.none'）.hide（）；
}
})
getSteams（）；
});
var通道=[“基本的”设计“方案”、“自由编码放大器”、“Golgothus”、“maatukka”、“Vinesauce”、“brunofin”、“comster404”、“OgamingSC2”]；
var cb=“？客户_id=egn4k1eja0yterrcu411n5e329rd3&callback=？”；
函数getstreams（）{
channels.forEach（函数（indchannel）{
//for（通道中的var通道）{
//通道=通道；
var streamURL=”https://api.twitch.tv/kraken/streams/“+indchannel+cb；
var channelURL=”https://api.twitch.tv/kraken/channels/“+indchannel+cb；
$.ajax({
url:streamURL，
键入：“GET”，
数据类型：“jsonp”，
数据：{
//操作：“查询”，
格式：“json”，
},
标题：{
“接受”：“application/vnd.twitchtv.v5+json”，
},
成功：功能（数据）{
var博弈；
var状态；
if（data.stream==null）{
$.getJSON（数据._links.channel+“/？客户端id=EGN4K1EJA0YTERRCU411N5E329RD3&callback=？”，函数（数据2）{
如果（data2.status==404）{
game=“账户不存在”；
status=“无”；
}否则{
game=“离线”；
status=“离线”；
}
$（“#脱机”）。追加（“”）；
} );
}否则{
game=data.stream.game；
status=“在线”；
$（“#在线”）。追加（“”）；
};
}
});
});
}

html，正文{
身高：100%；
保证金：0；
背景色：#ffffff；
}
.包装纸{
文本对齐：居中；
位置：相对位置；
宽度：100%；
身高：100%；
显示：块；
}
.集装箱{
宽度：75%；
利润率：30px自动0；
位置：相对位置；
}
.标志盒img{
宽度：20%；
保证金：0自动；
}
.控制{
位置：相对位置；
宽度：100%；
}
.con按钮{
位置：相对位置；
背景色：白色；
边界：无；
保证金：0.5em0；
填充：0.5em 1em 0.5em 1em；
文本对齐：居中；
颜色：rgb（100,65164）；
字体大小：20px；
过渡：.4s；
}
.con按钮：悬停{
光标：指针；
/*边框底部：3倍实心rgba（2242172361）*/
}
.con按钮：焦点{大纲：0；}
.效果{
位置：绝对位置；
左：0；
过渡：0.4s缓进缓出；
}
.控制.效果{
/*边框底部：3倍实心rgba（100,65,164,1）*/
高度：2倍；
底部：5px；
背景：#6441A4；
左边距：/*-45px*/自动；
右边距：/*-45px*/自动；
宽度：33%；
}
按钮：第n个子项（1）.active~.effect{left:0%；}
按钮：第n个子项（2）.active~.effect{left:33%；}
按钮：第n个子项（3）.active~.effect{left:66%；}
.hr{
边框顶部：1px实心#6441A4；
}

全部的
在线 的
离线

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

我们的想法是找到单击的锚定标记的位置和宽度，然后将其应用于

underline

元素（或在添加一些修改后）。为了使其移动平滑，您可以为

left

和

width

元素添加

transition

$（“#外部容器a”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var cssObj={}；
cssObj.left=$（this）.position（）.left；
cssObj.width=$（this）.outerWidth（）；
$（“#外部容器#下划线”）.css（cssObj）；
})；//单击（）
$（“#外部容器a”）.eq（0）.触发器（“单击”）；

#外部容器
{
文本对齐：居中；
位置：相对位置；
}
#外容器a
{
颜色：#333；
显示：内联块；
填充：0 10px；
文字装饰：无；
}
#外容器#下划线
{
内容：“；
显示：块；
位置：绝对位置；
底部：0；
左：0；
高度：2倍；
宽度：100px；
背景色：#333；
过渡：左0.3s缓和，宽度0.3s缓和；
}

签出此

$（文档）.ready（函数（）{
$（“.con按钮”）。单击（函数（）{
如果（this.id==“c-all”）{
$（“.con按钮”）.removeClass（“活动”）；
$（“#c-all”）.addClass（“活动”）；
$（'.offline'）.hide（）；
$（'.offline'）.fadeIn（“slow”）.show（）；
$（'.online'）.hide（）；
$（'.online'）.fadeIn（“slow”）.show（）；
$（'.none'）.fadeIn（“慢”）.show（）；