在按钮标题中显示URL

Question

所以，我有4个类别，2个子类别和2个按钮，如下所示。

https://jsfiddle.net/mboz45fv/15/

所以，这就是我想要实现的目标。

有两个按钮和4个类别按钮，2个子类别按钮。 默认情况下，它会显示Button 1和Button 2。

单击cat_B按钮（图像A）时，用户将被定向到.com/cat_B页面（图像B）。我想在cat_B的标题中显示button 1，如图所示。

每个类别都有两个子类别。 单击sub_cat_B后，用户将被重定向到.com/cat_b/sub_cat_b。我希望button 2的标题在该页面中为sub_cat_B。

我怎样才能做到这一点？

谢谢！

Answer 1

就个人而言，我会用已经显示主页URl的单独按钮构建每个页面，正如你所描述的那样，我认为有理由不这样做。如果你想用jquery设置按钮文本，你可以使用：

$("#cat_b").html('.com/cat_b');

如果缩减代码是您之后的假设，那么假设您使用的按钮不是输入，并且按钮的结构如下：

<button id="cat_b" class="butt" onclick="location.href='.com/cat_b'">button</button>

您可以使用@ rkho的方法，但直接从按钮自己的onclick属性中获取url，同时按类启动这应该减少代码量：

$('.butt').click(function(){
 var link=$(this).attr('onclick');
 var buttonText = link.substr(link.lastIndexOf('/') + 1);
 $("#cat_b").html(buttonText)
 })

Answer 2

我们将首先在窗口中获取URL。我们将它存储在名为id的变量中：

var id = window.location.href

然后，让我们抓住最后一个斜线右侧的所有内容：

var buttonText = id.substr(id.lastIndexOf('/') + 1);

现在，您可以设置您的特定按钮（我们假设您已使用“按钮”标记它）：

$(".button").text(buttonText);