-1

我使用这个小提琴作为展示推荐的基础 - 所以当你点击链接时，相关推荐显示。

我面临的问题是我需要在页面加载时显示第一个推荐 - 此时用户必须单击链接才能显示推荐。

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

小提琴：http: //jsfiddle.net/Fz44h/

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

5 回答 5

0

一个简单的

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

应该这样做。

于 2013-09-24T12:50:11.903 回答
0

只需添加 show() 方法和 document.ready 函数

$(document).ready(function(){

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

});
于 2013-09-24T12:53:03.767 回答
0

在你的情况下这是正确的

$(function(){
    $($('a.link')[1]).trigger('click');
});
于 2013-09-24T12:55:48.953 回答
0

使用 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);
    });
于 2013-09-24T12:58:20.850 回答
0

隐藏所有内容后，只需添加 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>
于 2013-09-24T13:03:55.363 回答