默认显示第一个导航窗口，直到其他人点击？

Question

目前，我正试图在点击另一个按钮时隐藏导航。

var $links = $('nav a');
var $content = $('.navLinks');
$links.click(function() {
  $content.hide();
  $content.eq( $links.index(this) ).show();
});

.navLinks {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
    <nav>
       <a href="#1">1</a>
       <a href="#2">2</a>
       <a href="#3">3</a>
    </nav>
</div>

<div id="1" class="navLinks"> content 1 </div>
<p>Some dummy paragraph that's trying to break our index count :)</p>
<div id="2" class="navLinks"> content 2 </div>
<div id="3" class="navLinks"> content 3 </div>

但是，我希望在用户点击1或2之前显示3的结果，我该怎样才能这样做？

Answer 1

只需为css中的第一个.navLinks元素添加不同的样式

.navLinks {
  display: none;
}

.navLinks:first-of-type {
  display: block;
}

修改

在这种情况下，它不会工作。

如果:first-of-type div是第一个div，那么

#1会起作用，但实际上在.nav div之后是第二个。

因此，您可以为所有display: block元素设置样式.navLinks，并为位于具有类{{1}的元素之后的所有display: none元素设置样式.navLinks }。

以下是一个工作示例

＆＃13;

＆＃13;

.navLinks

＆＃13;

var $links = $('nav a');
var $content = $('.navLinks');
$links.click(function() {
  $content.hide();
  $content.eq( $links.index(this) ).show();
});

＆＃13;

.navLinks {
    display: block;
}

.navLinks ~ .navLinks {
    display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

$('#1').show();
var $links = $('nav a');
var $content = $('.navLinks');
$links.click(function() {
  $content.hide();
  $content.eq( $links.index(this) ).show();
});

Answer 3

默认情况下，只需添加css即可显示#1（使用ID＆＃39; s以字母开头，而不是数字）：

＆＃13;

＆＃13;

var $links = $('nav a');
var $content = $('.navLinks');
$links.click(function() {
  $content.hide();
  $content.eq( $links.index(this) ).show();
});

＆＃13;

.navLinks {
    display: none;
}

#a1 {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
    <nav>
       <a href="#a1">1</a>
       <a href="#a2">2</a>
       <a href="#a3">3</a>
    </nav>
</div>

<div id="a1" class="navLinks"> content 1 </div>
<p>Some dummy paragraph that's trying to break our index count :)</p>
<div id="a2" class="navLinks"> content 2 </div>
<div id="a3" class="navLinks"> content 3 </div>

＆＃13;

＆＃13;

＆＃13;