在錨點標簽的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/