如何触发第一个链接的点击功能答案

【问题标题】：how to trigger click function for the first link如何触发第一个链接的点击功能
【发布时间】：2020-12-14 17:41:06
【问题描述】：

我对 javascript 非常陌生，我使用我找到的这个代码来创建一个网站的菜单表。当您单击选项卡时，它会根据您单击的选项卡在右侧的大框中显示特定内容。

当您加载页面时，由于所有内容都被隐藏，因此右侧框中没有显示任何内容。我希望它在您加载页面时已经“点击”了一个选项卡的内容。

$('.linkdetails').hide();

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="menucontainer">      
  <div class="left" >
    <a class="link" data-link="first" href="#">TAB 1         </a>
    <br/>
    <a class="link" data-link="second" href="#">TAB 2</a>
    <br/>      
    <a class="link" data-link="third" href="#">TAB 3 </a>
    <br/>   
   </div>
   <div class="content" >
     <div class="linkdetails" data-link="first" > TAB 1 CONTENT</div>
     <div class="linkdetails" data-link="second" >TAB 2 CONTENT</div>
     <div class="linkdetails" data-link="third" >TAB 3 CONTENT</div>
   </div> 
</div>

【问题讨论】：

如果我理解正确的话，您希望每次页面加载时都打开第一个链接？
@sportzpikachu 是的，没错

标签： javascript html onclick click

【解决方案1】：

您可以使用此代码：

$('.linkdetails').hide();

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

$('.linkdetails[data-link=first]').fadeIn({
    width: '200px'
}, 300);

您可以将data-link=first 替换为您想首先打开的任何链接，例如data-link=third.

【讨论】：

【解决方案2】：

这可以通过 localStorage 来完成。只需拥有它，以便动态保存单击的选项卡的状态，以便在加载页面时，您可以打开之前打开的选项卡。这是一个链接，我相信你可以从这里弄清楚： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

【讨论】：