单击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内容，但在点击之前将其中一个内容设置为可见。

回答

相关问题