點擊這個按鈕，隱藏信息並加載JavaScript的新信息

-1

https://jsfiddle.net/tsquinn/p044mb36/點擊這個按鈕，隱藏信息並加載JavaScript的新信息

這是我想要做的一個例子html。

<ul class="pageMenu"> 
     <li class="colorLink"><a href="">Red</a></li> 
     <li class="colorLink"><a href="">Blue</a></li> 
     <li class="colorLink"><a href="">Green</a></li> 
     <li class="colorLink"><a href="">Purple</a></li> 
    </ul> 
    <section id="contents"> 
     <h1>Contents</h1> 
     <p> 
      This is where the colored text loads. Each ".colorLink" click must overwrite the text that's here with the new text that corresponds with the link clicked. 
     </p> 
    </section> 
    <div id="colors"> 
     <div class="red"> 
      <h2>Red</h2> 
      <p> 
       This is RED text! 
      </p> 
     </div> 
     <div class="blue">     
      <h2>Blue</h2> 
      <p> 
       This is BLUE text! 
      </p> 
     </div> 
     <div class="green"> 
      <h2>Green</h2> 
      <p> 
       This is GREEN text! 
      </p> 
     </div> 
     <div class="purple"> 
      <h2>Purple</h2> 
      <p> 
       This is PURPLE text! 
      </p> 
    </div> 
</div>

問題：我需要div#colors加載頁面時被隱藏。然後點擊鏈接將相應的文本加載到頁面上的內容部分。

我在這裏和網絡的其他部分查詢了答案。我發現一個Q & A允許按鈕顯示/隱藏子鏈接，但我的鏈接不是兒童。我知道JS很少，但即使使用我發現的代碼也沒有解決問題。我可以得到按鈕來切換相應的文本，但我無法從一開始就隱藏任何東西。

這是據我可以得到我知道這是不對的：

<script> 
     var removeText = document.getElementById('colors').style.display='none';    
     $(document).ready(function showLink(){ 
      removeText; 
      $('.colorLink a').click(function(e){ 
      e.preventDefault(); 
       var links = document.getElementsByName('ul.pageMenu li'); 
       var page = document.getElementsByClassName('#colors div'); 
       if ($(this).links == page) { 
        $("#contents") 
       } 
      }); 
     }); 
    </script>

來源

2016-09-29 Tim

要麼你忘了它，或不知道它，但你的腳本中缺少部分。沒有人可以幫助你，如果你提供不完整的腳本。 –

如果'div＃colors'被隱藏（'display：none'），那麼沒有一個顏色類div會顯示，因爲它們在一個未顯示的容器中。即'div.blue'是否可見因爲它位於不可見容器內部並不重要。當頁面加載時你想要的是'div＃colors'的_contents_被隱藏，而不是div本身。你可以用純CSS做到這一點，你不需要使用javascript來隱藏它：'#colors div {display：none; }'會讓它們在加載時隱藏，但是之後你可以用javascript顯示它們。 –

出於某種原因，我甚至沒有想過使用CSS來隱藏所有內容。感謝那。 – Tim

有幾件事會在這裏。

首先，回調document.ready()通常是匿名的，就像在你的點擊處理程序：

$(document).ready(function() {...});

然後，links和page的值是不同的元素不同的集合，所以$(this).links == page永遠不會true。

最後，你正在混合一些純粹的JavaScript（document.getElement...）和jquery $(...)這會傷害你的頭。

可以代替這樣做（未經測試）：

$(document).ready(function(){ 
     $('#colors').hide(); 
     $('.colorLink a').click(function(e){ 
     e.preventDefault(); 
     // re-hide the divs 
     $('#colors').hide(); 
     // get the text of the target of the click 
     var link = $(e.target).text().toLowerCase(); 
     // show the corresponding div 
     $('#colors div#'+link).show(); 
     }); 
    });

來源

2016-09-29 23:51:41 varontron

這不起作用，但謝謝你的嘗試。 – Tim

您可以通過獲取指標做到這一點。參考工作demo.hope這將幫助你。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
\t 
 
</head> 
 

 
<style type="text/css"> 
 

 
div#colors div{ 
 
\t display: none; 
 
} 
 

 
</style> 
 

 

 
<body> 
 

 
    <ul class="pageMenu"> 
 
     <li class="colorLink"><a href="">Red</a></li> 
 
     <li class="colorLink"><a href="">Blue</a></li> 
 
     <li class="colorLink"><a href="">Green</a></li> 
 
     <li class="colorLink"><a href="">Purple</a></li> 
 
    </ul> 
 

 
<div id="colors"> 
 
     <div class="red"> 
 
      <h2>Red</h2> 
 
      <p> 
 
       This is RED text! 
 
      </p> 
 
     </div> 
 
     <div class="blue">     
 
      <h2>Blue</h2> 
 
      <p> 
 
       This is BLUE text! 
 
      </p> 
 
     </div> 
 
     <div class="green"> 
 
      <h2>Green</h2> 
 
      <p> 
 
       This is GREEN text! 
 
      </p> 
 
     </div> 
 
     <div class="purple"> 
 
      <h2>Purple</h2> 
 
      <p> 
 
       This is PURPLE text! 
 
      </p> 
 
    </div> 
 

 
</div> 
 

 

 

 
<script type="text/javascript"> 
 

 
$("ul.pageMenu li").click(function(e){ 
 
\t e.preventDefault();//stop the reloading page 
 
\t var theindex = $(this).index();//get the index number of clicked li 
 
\t //alert(theindex); 
 

 
\t $("div#colors div").eq(theindex).slideToggle(500);//according to the clicked id show/hide div. 
 
\t 
 
\t 
 
}); 
 

 

 

 
</script> 
 

 

 

 
</body> 
 

 

 
</html>

來源

2016-09-30 04:01:26

這確實有些幫助。它不會每次點擊都重新隱藏文本或將文本加載到內容部分，但是您已經給了我一些要研究的內容。感謝您的幫助。 – Tim

沒有它，當你點擊一個鏈接時，它會顯示它的div，當你點擊同一個鏈接時，它會隱藏它的分區 –

這是我爲了讓它更接近我需要的位置而做的。點擊（功能（e）{e0.preventDefault（）; ）var theindex = $（this）.index（） $（「＃contents」）。hide（300））; $（「div＃colors div」）。hide（400）; $（「div＃colors div」）。eq（theindex）.slideToggle（500）; }）; 剩下要做的唯一事情就是停止li上顯示div的點擊操作。 – Tim

所以我修修補補與@Anuradh S公司的代碼，並想出了這個讓幾乎正是我想要的。

$("ul.pageMenu li").click(function(e){ 
e.preventDefault();//stop the reloading page 
var theindex = $(this).index();//get the index number of clicked li 
//alert(theindex); 
$("#contents").hide(300); 
$("div#colors div").hide(400); 
$("div#colors div").eq(theindex).slideToggle(500);//according to the clicked id show/hide div.

}）;

最後一個想法是防止再次單擊當前文本鏈接或停止重新加載文本。

再次感謝！

來源

2016-09-30 17:39:40 Tim

點擊這個按鈕，隱藏信息並加載JavaScript的新信息

回答

相關問題