Question

尝试使用按钮选择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

实际上，有三种方法可以做到这一点

首先：使用:not(:nth-child(1))选择器

的css

.textWord_about{
   display : none;
}
.textWord_about:not(:nth-child(1)){  // 1 for the first index
   display : block;
}

使用$('.textWord_about:not(:nth-child(1))')选择器

的js

第二次

$('.textWord_about:not(:nth-child(1))').hide();

而不是

$('.textWord_about').hide();

使用.eq(0).click() // 0 is an index for first

的js

第三：

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

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

Answer 2

你已经拥有了一个匿名函数，它隐藏了除了刚刚点击的内容之外的所有内容，可以适用于onclick以及页面加载时设置默认值的一次，例如：

var defaultMenu = 'third';
menuSelect(defaultMenu);

$('.link').click(function() {
    menuSelect($(this).data("link"));
});

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

jquery选择中的默认类

2 个答案: