Question

我希望在按下特定链接时显示特定的div。这部分有效，但如果你看到下面的代码有任何错误，请不要犹豫，发表评论。我一直在问我是否应该用id替换rel。

问题

问题是加载页面时会加载所有div。当按下链接时，另一个消失。加载页面时，我只想显示div1。当按下另一个链接时，应该隐藏它。

JS

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
              $('.current').removeClass('current');
              $(this).addClass('current');
        });
    });

HTML

<div class="buttons">
     <a class="showSingle" target="1">Div 1</a>
     <a class="showSingle" target="2">Div 2</a>
     <a class="showSingle" target="3">Div 3</a>
</div>
<div id="div1" class="targetDiv">
     <!-- Content -->
</div>
<div id="div2" class="targetDiv">
     <!-- Content -->
</div>
<div id="div3" class="targetDiv">
     <!-- Content -->
</div>

Page can be found here.

任何解决方案？

Answer 1

我是这样做的：

将CSS类用于隐藏/活动状态;
确保初始标记反映初始状态;
使用DATA属性;
在任何地方使用tabno 或 data-;
在$中添加片段标识符，或使用jQuery元素;

href

button

$(function() {
  $('.showSingle').click(function() {
    $(".showSingle").removeClass("active");
    $(this).addClass("active");
    $('.targetDiv').addClass("hidden");
    $("#div" + $(this).data('target')).removeClass("hidden");
  });
});

Answer 2

JQuery有一个ready（）函数可以帮助你解决这个问题，因为它会在页面的所有资源都加载后执行。由于您不希望任何div显示，因此首先将其css样式设置为display:none。然后，使用ready函数在开头显示div1 $（document）.ready（function（）{$（＆＃34;＃div1＆＃34;）。show（）;}）;

加载页面时显示特定div

2 个答案: