单击此按钮，隐藏信息并在JavaScript中加载新信息

Click this button, hide info and load new info in JavaScript

本文关键字：信息 加载 新信息 JavaScript 按钮 隐藏 单击      更新时间：2023-09-26

https://jsfiddle.net/tsquinn/p044mb36/

这是我尝试做的示例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。然后单击链接将相应的文本加载到页面的内容部分。

我在这里和网上的其他地方查看了答案。我发现了一个问答；允许按下按钮显示/隐藏子链接，但我的链接不是子链接。我对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>

这里发生了一些事情。

首先，对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();
        });
    });

您可以通过获取索引来实现。推荐正在工作的演示。希望这对你有帮助。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</head>
<style type="text/css">
div#colors div{
	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){
	e.preventDefault();//stop the reloading page
	var theindex = $(this).index();//get the index number of clicked li
	//alert(theindex);
	$("div#colors div").eq(theindex).slideToggle(500);//according to the clicked id show/hide div.
	
	
});
</script>
</body>
</html>

所以我修改了@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.

})；

最后一个想法是防止当前文本链接再次被点击，或者阻止文本重新加载。

再次感谢！

相关文章：