Javascript 用该div外的按钮更改div的内容？_Javascript_Jquery_Html_Ajax

Javascript 用该div外的按钮更改div的内容？

javascript jquery html ajax

Javascript 用该div外的按钮更改div的内容？,javascript,jquery,html,ajax,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="#abo

这个问题是不久前提出的一个问题的后续问题

以下是我的代码块：

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


• 
•
文本1
文本2
$（'.instruction_type'）.hide（）；
$（'.link'）。单击（函数（）{
$（'.instruction_type'）.hide（）；
$（'.instruction_type[data link='+$（this）.data（'link'+']）.fadeIn（{width:'200px'}，300）；
});

它是功能性的！但是，当前，您加载页面时会看到两个可单击的链接：“说明”和“视频”。页面的其余部分为空白

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

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

您正在用此行隐藏这两个选项：

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


$（'.instruction_type'）.hide（）；

您可以将其更改为：

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


$（'.instruction_type[data link=second]'）。hide（）；

只隐藏第二个代码。

只需在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();

为什么不改用CSS呢，这里有一个

然后在jQuery中

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

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