将html标签添加到文本禁用按钮功能

请参阅下面的代码。我有完整的页面部分，每个部分都有一个按钮。当按下按钮时，我希望页面进入下一部分。一切工作正常，除非我在<h1></h1>或<p></p>标签部分中的文字。例如，请参阅第1和第2节，其中出于某种原因，在添加这些标记后，按钮不起作用。它正在其他部分工作。即使在第1节中，如果我删除<h1></h1>标签，它也可以正常工作。这些标签与按钮的功能有什么关系？将html标签添加到文本禁用按钮功能

<!DOCTYPE html> 
<html> 
<head> 
    <title>Selecting multiple DIV tags with jquery</title> 
    <script type="text/javascript" src="./jquery.js"> 
    </script> 
    <style type="text/css"> 

     html{ 
      overflow: hidden; 
     } 

     body { 
      backround-color: rgb(250, 250, 250); 
     } 

     h1 { 
      font-size: 48px; 
      color: rgb(90,90,90); 
     } 

     .slide { 
      display: block; 
      position: absolute; 
      border-style: solid; 
      border-width: 1px; 
      top: 0px; 
      left: 0px; 
      padding:20px; 
      height: 95%; 
      width: 100%; 
      font-family: Georgia; 
     } 
    </style> 
</head> 
<body> 

    <section class="slide"> 
     <h1>This is the first div.</h1> 
    </section> 

    <section class="slide"> 
     <p>This is the second div.</p> 
    </section> 


    <section class="slide">This is the third div.</section> 

    <section class="slide">This is the fourth div.</section> 

    <section class="slide">This is the fifth div.</section> 

    <section class="slide">This is the sixth div.</section> 



    <script type="text/javascript"> 

    // Assign ids to each section in the order they appear. 

    $(document).ready(function(){ 
     $("section").each(function(index){ 
      idtag = 's' + (index + 1) 
      $(this).attr('id', idtag); 
      $(this).append('<button>Next div</button>'); 
      $(this).css('opacity', 0); 
     }); 


    var presentation = function() { 

     $("section").each(function(index){ 
      $(this).css('opacity', 0); 
     });  
     // Check if the current url points to a specific id. If not point 
     // it to id = 1, otherwise point it to the id specified in the URL. 

     var currenturl = $(location).attr('href'); 


     var indexhash = currenturl.lastIndexOf('#') 

     if (indexhash === -1) { 
      var newurl = currenturl + '#s1'; 
      $("#1").css('opacity',1); 
      window.location.href = newurl; 
     } 
     else { 
      var currentid = currenturl.substring(indexhash, currenturl.length); 
      console.log(currentid); 
      $(currentid).css('opacity', 1); 
      window.location.href = currenturl; 
      // window.location.assign(currenturl); 
     } 

    }; 

     var nextdiv = function() { 
      currenturl = location.href; 
      currentid = location.hash; 
      console.log(currentid); 
      newidnum = parseInt(currentid.substring(currentid.indexOf('s')+1, currentid.length),10)+1; 
      newid = "#s" + newidnum; 
      newurl = currenturl.substring(0,currenturl.lastIndexOf('#'))+newid; 
      console.log(newurl); 
      window.location.href = newurl; 

     }; 

     // $(document).ready(presentation); 
     presentation(); 
     $(window).bind('hashchange', presentation); 
     $('button').bind('click', nextdiv); 

    }); 

    </script> 
</body> 
</html>

来源

2012-06-26 Curious2learn

为什么你使用部分，而不是divs？ – Fallenreaper

看起来您的整个脚本应该位于'$（document）.ready（...）'内，而不仅仅是'presentation'。 – Mathletics

是的，我没有看到$（function（）{...}）的jquery形式的任何东西; – Fallenreaper

这有什么，与你的部分内容中的HTML元素，它所要做的事实，你已经堆放在彼此的顶部所有的元素和不透明度设为零，而不是实际用显示属性隐藏它们（display:none vs opacity:0）。你可以看到这个，如果你删除所有的第一节元素，它的工作正常。此外，如果您使用Chrome开发人员工具等工具检查自己的代码，则会看到第六节元素实际上是最顶层的元素，并且会阻止它下面的所有元素。您每次都点击同一个顶部按钮，而不是该部分元素的子按钮。你可以看到，通过分配一个ID到每个按钮，然后控制台记录它与$('button').click(function(){console.log($('button').attr('id'));});

来源

2012-06-26 15:52:28 j08691

非常感谢。我在想，问是否有更好的选择不透明，并且我想，我可能会遇到这种元素与其他事物重叠的问题。虽然我没有发现这里发布的问题与此有关。奇怪的是，问题出现后才添加html标签元素，而不是之前。感谢您的回答。现在工作正常。 – Curious2learn

将html标签添加到文本禁用按钮功能

回答

相关问题