將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標籤添加到文本禁用按鈕功能

回答

相關問題