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/

如何删除锚标记的href属性中的＃

2 个答案: