更改div的內容與按鈕之外的div？

這裏是我的代碼塊：

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

它的功能！但是，目前，您加載該頁面並看到兩個可點擊的鏈接：「說明」和「視頻」。頁面的其餘部分是空白的。

我希望頁面默認爲「說明」，然後如果你點擊「視頻」它會改變頁面的內容。

要清楚：功能代碼，希望頁面顯示加載時的說明。

來源

2014-07-16 user2996892

就在這個代碼添加到您的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();

來源

2014-07-16 18:44:53

非常完美，非常感謝！ – user2996892

您與這條線都隱藏：

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

你可以將其更改爲：

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

要只隱藏的第二個。

來源

2014-07-16 18:43:38 dave

爲什麼不使用CSS來代替，這裏有一個FIDDLE

.instruction_type { 
    display: none; 
} 
.instruction_type:nth-child(1) { 
    display: block; 
}

然後在jQuery的

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

來源

2014-07-16 18:56:56 mdesdev

更改div的內容與按鈕之外的div？

回答

相關問題