Question

以下是菜单及其脚本的代码，当我点击菜单时我想要查找页面的标题...下面的代码无效...请帮助我......

＆＃13;

<script>
  function myFunction() 
  {  
    document.title = document.getElementsByClassName("MENU").text;
 }
</scipt>

＆＃13;

<ul class="menu">
<li><a class="MENU" href="#" onclick="javascript:myFunction();">About Us</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction();">Rooms</a></li>
							
<li><a class="MENU" href="#" onclick="javascript:myFunction();">Reservation</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction();">Gallery</a></li>
                            
<li><a class="MENU" href="#" onclick="javascript:myFunction();">Contact Us</a></li> 
							
</ul> <!-- /.menu -->

＆＃13;

Answer 1

尝试以下方法：

＆＃13;

function myFunction() 
      { 
        document.title = event.target.text;
     }

＆＃13;

    <ul class="menu">
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">About Us</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Rooms</a></li>
    							
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Reservation</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Gallery</a></li>
                                
    <li><a class="MENU" href="#" onclick="javascript:myFunction();">Contact Us</a></li> 
    							
    </ul>

＆＃13;

Answer 2

试试这个..

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

<ul class="menu">
<li><a class="MENUNAME" href="javascript:;" >About Us</a></li>

<li><a class="MENUNAME" href="javascript:;" >Rooms</a></li>

<li><a class="MENUNAME" href="javascript:;">Reservation</a></li>

<li><a class="MENUNAME" href="javascript:;" >Gallery</a></li>

<li><a class="MENUNAME" href="javascript:;" >Contact Us</a></li> 

</ul> <!-- /.menu -->
<script>
 $(".MENUNAME").click(function(){

 document.title = $(this).html();
 });
</script>

Answer 3

这应该适合你。

删除 onclick属性javascript将负责其余部分。

<强>的Javascript

function Events(){
var nav=document.getElementsByClassName('MENU');
//Set Event Listeners for all elements with the class MenuItem
for(var i=0; i<nav.length; i++){
nav[i].addEventListener('click',myFunction,false);
}
}
function myFunction(){
    document.title=event.target.innerHTML;
}

window.onload=Events;

<强> HTML：

<ul class="menu">
<li><a class="MENU" href="#">About Us</a></li>
<li><a class="MENU" href="#">Rooms</a></li>                         
<li><a class="MENU" href="#">Reservation</a></li>
<li><a class="MENU" href="#">Gallery</a></li>                           
<li><a class="MENU" href="#">Contact Us</a></li>                        
</ul>

注意：您无需在菜单元素上添加onclick属性。 window.onload将调用Events函数，这将为每个元素设置onclick事件。 myFunction将以用于触发函数的元素的innerHTML为目标。

您可以使用.innerHTML 或 .text

我希望这会有所帮助。快乐的编码！

Answer 4

您可以试试吗，您可以使用innerHTML获取li标记文字

<script>
  function myFunction(d) 
  {  
    document.title = d.innerHTML;
 }
</script>

<ul class="menu">
    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">About Us</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>

    <li><a class="MENU" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li> 

</ul> <!-- /.menu -->

Answer 5

您必须将值传递给您的函数.getElementsByClassName只需要所有类元素＆＃39; MENU＆＃39;。以下代码对我有用：

<script>
  function myFunction(myValue) 
  {  
    document.title = myValue
 }
</script>
<ul class="menu">
<li><a class="MENU" href="#" onclick="javascript:myFunction('About Us');">About Us</a></li>



<li><a class="MENU" href="#" onclick="javascript:myFunction('Rooms');">Rooms</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Reservation');">Reservation</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Gallery');">Gallery</a></li>

<li><a class="MENU" href="#" onclick="javascript:myFunction('Contact Us');">Contact Us</a></li> 

</ul> <!-- /.menu -->

请注意，您的结尾脚本写错了。将scipt改为剧本。

另请注意，如果我们谈论SEO，这可能不是更改标题的最佳方式，请参阅：How to dynamically change a web page's title?

Answer 6

$('.menu li a').on('click', function(e) { e.preventDefault(); $(document).attr("title", e.target.text); });

这会奏效。请检查您是否在iframe中。如果您在iframe中，那么它将无法正常工作，它将仅为该特定iframe设置标题。

下面的代码将为iframe的父窗口设置标题。但是，请确保从同一个域提供父窗口和iframe。

$('.menu li a').on('click', function(e) { e.preventDefault(); window.parent.document.title = e.target.text; });

点击<li> </li>更改标题

6 个答案: