Question

我有3个链接，每个都打开他自己的div元素，问题是，当我刷新我的页面时，每个3都是可见的，并且在加载时我希望第一个显示，然后在jquery之间切换show和hide函数其他

HTML

<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

JS

        $('#showdiv2').click(function(){
            $('div[id^=div]').hide();
            $('#div2').show();
        });

        $('#showdiv3').click(function(){
            $('div[id^=div]').hide();
            $('#div3').show();
        });

        $('#showdiv4').click(function(){
            $('div[id^=div]').hide();
            $('#div4').show();
        });

Answer 1

您可以使用CSS隐藏集合中除第一个元素之外的所有元素。您还可以通过使用公共类以及将选择器置于href属性中来定位逻辑以使用单个事件处理程序。试试这个：

$('.button').click(function(e) { 
  e.preventDefault();
  $('.div').hide().removeClass('active')
    .filter($(this).attr('href')).show().addClass('active');
});

.div ~ .div {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="button" href="#div2">Div 2</a>
<a class="button" href="#div3">Div 3</a>
<a class="button" href="#div4">Div 4</a>
<div class="div active" id="div2">2</div>
<div class="div" id="div3">3</div>
<div class="div" id="div4">4</div>

Answer 2

小提琴：https://jsfiddle.net/afg8qn0j/

(function() {
    $('#div3').hide();
    $('#div4').hide();
 })();

一旦DOM已准备好加载，就会加载此脚本块。它最初会隐藏您的#div3和#div4。

加载页面时如何只显示我的3 div元素中的第一个元素

2 个答案: