Question

这个问题是前一段时间问题的后续问题。

这是我的代码块：

<head>    
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>   
<body>
  <div>
    <a class="link" href="#about" data-link="first">Instructions</a> &#8226; 
    <a class="link" href="#about" data-link="second">Video</a> &#8226;
  </div>
  <div>
    <div class="instruction_type" data-link="first">
      <p>TEXT 1</p>
    </div>
    <div class="instruction_type" data-link="second">
      <p>TEXT 2</p>
    </div>
  </div>
</body>   
<script type="text/javascript">
  $('.instruction_type').hide();

  $('.link').click(function() {
    $('.instruction_type').hide();       
    $('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
  });
</script>

功能齐全！但是，目前，您加载页面并看到两个可点击的链接：“说明”和“视频”。页面的其余部分为空白。

我希望页面默认为“说明”，然后点击“视频”，它会更改页面内容。

要明确：功能代码，希望在加载时有页面显示说明。

Answer 1

你用这一行隐藏了两个：

<script type="text/javascript">
$('.instruction_type').hide();

您可以将其更改为：

<script type="text/javascript">
$('.instruction_type[data-link=second]').hide();

仅隐藏第二个。

Answer 2

只需将此代码添加到javascript的末尾：

$('.link:first').click();

这样，当页面加载时，点击第一个按钮..

您的javascript代码将是这样的：

$('.instruction_type').hide();


$('.link').click(function() {
    $('.instruction_type').hide();       
    $('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});

$('.link:first').click();

Answer 3

为什么不使用CSS，这里是 FIDDLE

.instruction_type {
  display: none;
}
.instruction_type:nth-child(1) { 
  display: block;
}

然后在jQuery中

$('.instruction_type[data-link="' + $(this).data('link') + '"]').fadeIn(300, 'linear').siblings('.instruction_type').fadeOut(300, 'linear');

使用div之外的按钮更改div的内容？

3 个答案: