在锚点标签的href属性中删除＃

Question

我正在制作一个标签，其概念是当一个人单击标签菜单时，jQuery将检查该锚标记的href属性（标签菜单）并删除其中的＃号，并保留该属性的其余attr内容（href） 。 例如

<a href="#home" class="tabmenu">Tab 1</a><a href="#inventory" class="tabmenu>Tab 2</a>
<div id="home" class="tab">content of tab 1 here</div>
<div id="inventory" class="tab">content of tab 2 here</div>

因此，当点击选项卡菜单之一时。 jQuery会删除该锚标记href属性的＃，因此href属性将是这个href =“ home”（如果单击选项卡1），然后jQuery将首先隐藏所有选项卡内容div（.tab），然后显示内容具有#home的标签（如果单击了标签1）。

因此脚本概念将看起来像这样：

$(document).ready(function(){
    $('.tabmenu').click(function(){
        //get the anchor tag attr
        //remove # inside this anchor tag href attribute and the remaining content will be put in a variable
        //hide all tab content first
        //get the stored variable and then show the tab content that match of that stored variable e.g. (home or inventory).
    });
});

任何帮助将不胜感激。 谢谢！

Answer 1

不确定为什么要更改href属性，这甚至对于您正在做的事情都不是必需的，但是也许您还需要其他属性，因此在这里：

$(document).ready(function(){
    $('.tabmenu').click(function(){

        //get the anchor tag attr
        var href = $(this).attr('href');

        //remove # inside this anchor tag href attribute and the remaining content will be put in a variable
        if (href[0] == '#') {
            this.attr('href') = href.substring(1);
        }

        //hide all tab content first
        $('.tab').hide();

        //get the stored variable and then show the tab content that match of that stored variable e.g. (home or inventory).
        $(href).show();
    });
});

请注意，由于我们更改了href属性，因此该代码仅对每个链接起作用一次。 如果需要，我可以对其进行修改以与更改后的属性一起使用。

Answer 2

如果要在用户单击选项卡时仅显示匹配的内容，则可以使用以下代码：

$(document).ready(function(){    
    $('.tabmenu').click(function(){
        //hide all:
        $(".tab").hide();
        //show clicked tab:
        $("#" + $(this).attr('href').substring(1)).show();
    });
});

工作提琴： http : //jsfiddle.net/x29gn8yo/