Question

这是我尝试做的示例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＆amp; 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>

Answer 1

这里有一些事情发生。

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

Answer 2

你可以通过获取索引来实现。参考有效的demo.hope，这对你有帮助。

<!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>

Answer 3

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

}）;

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

再次感谢！

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

3 个答案: