Question

我有这段代码，但我无法完成这项工作，我无法加载链接

的jquery.js

 $('.menu_top').click(function(){

        var href = $(this).attr('href');
        $('#content_area').fadeOut().load(href).fadeIn('normal');

        $('.menu_top').not(this).removeClass('active');
        $(this).addClass('active');

        return false;
    });

的index.php

  <a class="menu_top" href="#content_area">LINK 1</a> 
        <a id="content_area"style="display:none;">
         THIS IS LINK ONE 
       </a>
  <a class="menu_top" href="#content_area">LINK 2</a> 
        <a id="content_area"style="display:none;">
         THIS IS LINK TWO
       </a>

Answer 1

您需要使用$(this).closest('a')在class="menu_top"之后找到最接近的anchar。

<强> Documentation of .closest()

$('.menu_top').click(function(){

    var href = $(this).attr('href');
    $(this).closest('a').fadeOut().next('a').fadeIn('normal');

    $('.menu_top').not(this).removeClass('active');
    $(this).addClass('active');

    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="menu_top" href="#content_area">LINK 1</a> 
<a id="content_area"style="display:none;">
THIS IS LINK ONE 
</a>
<a class="menu_top" href="#content_area">LINK 2</a> 
<a id="content_area"style="display:none;">
THIS IS LINK TWO
</a>

Answer 2

这个解决方案对我有用的的index.php

<div class="menu_top" data-target="#content_area1">Link 1</div> <div class="menu_top" data-target="#content_area2" >Link 2</div> <div class="menu_top" data-target="#content_area3" >Link3</div> <div id="content_area1" class="content_area" style="display:none;"> This is link 1 </div> <div id="content_area1" class="content_area" style="display:none;"> This is link 2 </div> <div id="content_area1" class="content_area" style="display:none;"> This is link 3 </div>

<强>的jquery.js

$('.menu_top').click(function() { var el=$(this) $('.menu_top').removeClass('active') $('.content_area').hide() $($(this).data('target')).show('slow', function() { $(el).addClass('active'); }); });

jquery无法加载div

2 个答案: