タイトルに基づくタブを非表示にする

Question

私のウェブページを第2の情報として印刷するときに、特定のタブを閉じようとしています。

タイトルに基づいてタブを閉じることはできますか？私は自分自身のタブにID /クラスを追加することができません。実際のものではない任意の各タブIDに非表示ルールを適用する必要があるため、生成されたIDを使用することはできません。

タブの量と位置がページごとに異なるため、n番目の子ルールを使用することはできません。私が考えることができる唯一の解決策は、タイトルに基づいてタブを非表示にすることです。

以下は、ページのHTMLです。タイトルが「追加情報」のすべてのタブを非表示にしたい場合は、これを行う方法はありますか？

<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Additional Info</a> 

ご協力いただければ幸いです。

おかげ

Answer 1

は、私はすべてのタブが同じクラスui-tabs-anchorを持っているとします。もしそうなら、あなたはこのような何かを行うことができます。

// Get all tabelements 
 
var tabs = document.getElementsByClassName('ui-tabs-anchor'); 
 

 
// Loop through each tabelement 
 
for (var i = 0, j = tabs.length; i < j; i++) { 
 
    // If the innerHTML equals 'Additional Info' 
 
    if (tabs[i].innerHTML === 'Additional Info') { 
 
    // Hide the element 
 
    tabs[i].style.display = 'none'; 
 
    } 
 
}

<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Other Info</a> 
 
<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Additional Info</a> 
 
<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">More Info</a> 
 
<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Additional Info</a> 
 
<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-5">Different Info</a> 
 
<a href="#tab-1415272795947-4-9" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6">Additional Info</a>