單擊div外的按鈕更改div內容，但在點擊之前將其中一個內容設置爲可見。

大家好，非常感謝您閱讀本文。單擊div外的按鈕更改div內容，但在點擊之前將其中一個內容設置爲可見。

我跟隨我的前面的問題：如何通過單擊div外部的按鈕來更改div的內容。現在，我可以通過單擊按鈕成功更改內容。

但是，在我點擊任何東西之前，要顯示內容的div完全是空白的。我不希望它是空白的。相反，我希望它能在點擊任何內容之前展現出一些東西事實上，我希望它顯示按鈕一的內容。

我應該怎麼做到這一點？

這是我工作的代碼：

<head>  
<link href="textContainer.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<style type="text/css"> <------I put these in CSS style sheet. 
.textWord_about{ 
position: absolute; 
font-family: Calibri; 
font-size: 14px; 
top: 22px; 
left: 29px; 
width: 650px; 
height: 390px; 
text-align: left; 
background-image: url(images/slider_bkgd.png); 
background-repeat: repeat; 
} 
.textContainer_about { 
position: absolute; 
top: 870px; 
left: 234px; 
width: 727px; 
height: 452px; 
z-index: 20; 
color: rgb(4,4,4); 
display: block; 
background-image: url(images/slider_bkgd.png); 
background-repeat: repeat; 
overflow: visible; 
} 
.links { 
font-family: Calibri; 
font-size: 14px; 
} 
</style> 
</head> 


<body> 
<div id="menu_about"> 
<a class="link" href="#about" data-link="first">&nbsp;&nbsp; Why We Exist</a> &#8226; <a  class="link" href="#about" data-link="second">Who We Are</a> &#8226; 
<a class="link" href="#about" data-link="third">What We Do</a> &#8226; 
<a class="link" href="#about" data-link="fourth">How We Think</a> &#8226; 
<a class="link" href="#about" data-link="fifth">Where We Are Going</a> 
</div> 
<div id="pages_about" class="textContainer_about"> 
<div class="textWord_about" data-link="first"> 
<p>ffffffffffffffffffffffffffff</p> 
</div> 
<div class="textWord_about" data-link="second"> 
    <p>ffffffffffffffffffffffffffff</p> 
</div> 
<div class="textWord_about" data-link="third"> 
    <p>ffffffffffffffffffffffffffff</p> 
</div> 
<div class="textWord_about" data-link="fourth"> 
    <p>ffffffffffffffffffffffffffff</p> 
    <p>ffffffffffffffffffffffffffff</p> 
    <p>ffffffffffffffffffffffffffff</p> 
    <p>ffffffffffffffffffffffffffff</p> 
    <p>ffffffffffffffffffffffffffff</p> 
</div> 
<div class="textWord_about" data-link="fifth"> 
    <p>ffffffffffffffffffffffffffff</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>

你的幫助深表感謝！謝謝！

來源

2012-10-11 user1735546

你是隱藏在頁面加載所有的div $('.textword_about').hide();

你需要顯示的第一個，更換符合以下

$('.textword_about').hide(); 
$('.textword_about:first-child').show();

來源

2012-10-11 11:04:11 Andy

精彩！謝謝安迪。非常感激。 – user1735546

或$（'。textword_about'）。not（「：first-child」）。hide（）; – besluitloos

單擊div外的按鈕更改div內容，但在點擊之前將其中一個內容設置爲可見。

回答

相關問題