更改標籤上標題的內容點擊

Question

我有一個小問題。當我點擊頁面上的5個選項卡中的一個時，我想更改頁面標題。該頁面的標題應根據點擊的標籤而改變。如果將這樣記載：

<div id="tab1"></div> 
<div id="tab2"></div> 
<div id="tab3"></div> 
<div id="tab4"></div> 
<div id="tab5"></div> 

當TAB1點擊，標題應該改爲「TAB1，TAB2上點擊時，標題應該改爲TAB2等等...

我試圖與這jQuery的，但沒有奏效。:)

<script type="text/javascript"> 
$(document).ready(function(){ 
    ('#tab2').click(function()}{ 
     (document).title ('tab2'); 
    }) 
}); 

你能幫我嗎？

謝謝....

Answer 1

試試這個

<div class="change-title" id="tab1">1</div> 
<div class="change-title" id="tab2">2</div> 
<div class="change-title" id="tab3">3</div> 
<div class="change-title" id="tab4">4</div> 
<div class="change-title" id="tab5">5</div> 

<script> 
$(document).ready(function() { 
    $('.change-title').on('click',function(){ 
     document.title = $(this).attr('id'); 
    }); 
}); 
</script> 

Answer 2

純的js我可以給你短版也

function changeTitle(pagetitle){ 
 
document.title = pagetitle; 
 
} 
 
document.getElementById('tab1').onclick = function(){changeTitle("tab1")}; 
 
document.getElementById('tab2').onclick = function(){changeTitle("tab2")}; 
 
document.getElementById('tab3').onclick = function(){changeTitle("tab3")}; 
 
document.getElementById('tab4').onclick = function(){changeTitle("tab4")}; 
 
document.getElementById('tab5').onclick = function(){changeTitle("tab5")};

<div id="tab1">A</div> 
 
<div id="tab2">B</div> 
 
<div id="tab3">C</div> 
 
<div id="tab4">D</div> 
 
<div id="tab5">E</div>

Answer 3

優雅的解決方案也可能是，如果你會在jQuery中使用data()方法。然後，您可以簡單地爲標題標籤中顯示的每個標籤定義首選標題，並且它不再與您的標識名稱相關聯。

HTML

<div id="tab1" data-title="Tab 1"></div> 
<div id="tab2" data-title="Tab 2"></div> 
<div id="tab3" data-title="Tab 3"></div> 
<div id="tab4" data-title="Tab 4"></div> 
<div id="tab5" data-title="Tab 5"></div> 

jQuery的

$("div").click(function(){ 
    document.title = $(this).data("title"); 
});