单击div外部的按钮来更改div内容，但在单击之前将其中一个内容设置为可见 [英] Change div content on clicking a button outside div, but set one of the contents as visible before click
问题描述
大家好，非常感谢您阅读这篇文章.
Hi all thanks so much for reading this post.
我正在回答我先前的问题:如何通过单击div外部的按钮来更改div的内容.现在，我可以通过单击按钮来成功更改内容.
I am following up on my earlier question: How to change content of a div by clicking a button outside the div. Now I can successfully change the content by clicking a button.
但是，在单击任何内容之前，要显示内容的div完全空白.我不希望它是空白的.相反，我希望它在单击任何内容之前先显示一些内容.实际上，我希望它显示按钮一的内容.
However, before I click anything, the div where the content is to be shown is completely blank. I don't want it to be blank. Instead I want it to show something before I click anything. In fact I want it to show the content for button one.
我应该如何实现?
这是我的工作代码:
<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"> Why We Exist</a> • <a class="link" href="#about" data-link="second">Who We Are</a> •
<a class="link" href="#about" data-link="third">What We Do</a> •
<a class="link" href="#about" data-link="fourth">How We Think</a> •
<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>
非常感谢您的帮助！谢谢！
Your help is much appreciated! THANKS!
推荐答案
您正在使用$('.textword_about').hide();
您需要显示第一个，并用以下内容替换该行
You need to show the first one, replace that line with the following
$('.textword_about').hide();
$('.textword_about:first-child').show();
这篇关于单击div外部的按钮来更改div内容，但在单击之前将其中一个内容设置为可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
