javascript - 使用 div 外部的按钮更改 div 的内容?

标签 javascript jquery html ajax

这个问题是之前提出的问题的后续问题。

这是我的代码块:

<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>

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

我希望页面默认为“说明”,然后如果您单击“视频”,它会更改页面的内容。

需要明确的是:功能代码,希望页面在加载时显示说明。

最佳答案

只需将此代码添加到 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();

关于javascript - 使用 div 外部的按钮更改 div 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24788286/

相关文章:

javascript - 使用 jsPDf 将网页导出为 PDF

javascript - object.Create 返回的对象类型

javascript - Foundation 6 DropdownMenu 事件未触发

jquery - 使用 jQuery 在 td 字段中的电话号码中插入连字符

javascript - 无法通过ajax提交数据

javascript - 无法附加图像

javascript - 具有多个输入的 Knockout Has-focus

javascript - HTML5 音频标签持续时间

javascript - Vue 中的动态输入修饰符

jquery - 如何获取网页上非均匀滚动的元素和分层的 "curtain-like"背景?