Question

我使用this fiddle作为展示推荐书的基础 - 所以当您点击相关推荐书显示的链接时。

我面临的问题是我需要第一个推荐信来显示页面何时加载 - 此时用户必须点击链接以显示推荐信。

有谁知道我怎么做到这一点？

<body>
<div id="menu_about">
    <a class="link" href="#about" data-link="first"></a> &#8226; 
    <a class="link" href="#about" data-link="second">Testimonial 1</a> &#8226;
    <a class="link" href="#about" data-link="third">Testimonial 2</a> &#8226; 
    <a class="link" href="#about" data-link="fourth">Testimonial 3</a> &#8226; 
    <a class="link" href="#about" data-link="fifth">Testimonial 4</a>
</div>
<div id="pages_about" class="textContainer_about">
    <div class="textWord_about" data-link="first">
        <p>Scelerisque arcu lorem porta? Porttitor ridiculus adipiscing diam nisi, turpis, aliquam tincidunt phasellus lundium! </p>
    </div>
    <div class="textWord_about" data-link="second">
        <p>Lacus auctor dapibus. Placerat massa lundium lundium in, et. In lacus augue nisi? </p>
    </div>
    <div class="textWord_about" data-link="third">
        <p>Placerat massa lundium lundium in, et. In lacus augue nisi?</p>
    </div>
    <div class="textWord_about" data-link="fourth">
        <p>Scelerisque arcu lorem porta? Porttitor ridiculus adipiscing diam nisi, turpis, aliquam tincidunt phasellus lundium!</p>
    </div>
    <div class="textWord_about" data-link="fifth">
        <p>Lacus auctor dapibus. Placerat massa lundium lundium in, et. In lacus augue nisi? </p>
    </div>
</div>
<script type="text/javascript">
    $('.textWord_about').hide();
    $('.link').click(function() {
    $('.textWord_about').hide();       
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
    width: '200px'
    }, 300);
    });
</script>

Answer 1

一个简单的

$(document).ready(function() {
    $(".link:first").click();
});

应该这样做。

Answer 2

只需添加show（）方法和document.ready函数

即可

$(document).ready(function(){

    $('#menu_about a').first().show();
    //any other statement

});

Answer 3

在你的情况下，这是正确的

$(function(){
    $($('a.link')[1]).trigger('click');
});

Answer 4

使用data-link属性显示第一个数据应该可以解决问题：

 $('.textWord_about[data-link="first"]').show();

代码：

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

Answer 5

在没有点击

的情况下隐藏所有内容后，首先添加fadeIn（）

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

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

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

在页面加载时显示div的内容

5 个答案: