Question

我有点问题。当我点击我页面上的5个标签中的1个时，我想更改页面标题。该页面的标题应根据单击的选项卡进行更改。如果会这样：

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

单击tab1时，标题应更改为＆＃34; 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

如果您在jQuery中使用data()方法，也可以使用优雅的解决方案。然后，您只需为标题标记中显示的每个标签定义首选标题，它就不再受限于您的ID名称。

<强> 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");
});

Answer 3

Pure 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>

在标签点击上更改标题的内容

3 个答案: