javascript 如何通过单击 div 外的按钮来更改 div 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12824241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change content of a div by clicking a button outside the div?
提问by user1735546
Thanks for taking the time to read this post. Hope those who are asking the same question would get their answers too.
感谢您花时间阅读这篇文章。希望问同样问题的人也能得到答案。
I am working on a single page website divided into 8 big divs, so that when you click on the menu bar, it will take you to one of the divs (or "pages).
我正在处理一个分为 8 个大 div 的单页网站，因此当您单击菜单栏时，它会将您带到其中一个 div（或“页面”）。
On one of the divs (or pages), which is the intro section of my website, I'm trying to introduce this effect :http://jsfiddle.net/unbornink/LUKGt/
在我网站的介绍部分的 div（或页面）之一上，我试图介绍这种效果：http://jsfiddle.net/unbornink/LUKGt/
I have a row of buttons, e.g. "Who we are", "What we do", "How we think"....and I have a div under this row of buttons, where different texts are shown when you click on different buttons.
我有一排按钮，例如“我们是谁”、“我们做什么”、“我们如何思考”......我在这排按钮下有一个 div，当你点击不同的按钮时会显示不同的文本纽扣。
I tried to follow all the steps suggested by http://jsfiddle.net/unbornink/LUKGt/. Unfortunately, I cannot get the button to fire.
我尝试按照http://jsfiddle.net/unbornink/LUKGt/建议的所有步骤进行操作。不幸的是，我无法触发按钮。
Here is the code of my work:
这是我的工作代码：
<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>
Please propose a solution! Much APPRECIATED!
请提出解决方案！非常感激！
回答by Selvakumar Arumugam
There is typo in your selector. Change textword_aboutto textWord_about[Note the letter Win textWord_about]
您的选择器中有错字。更改textword_about到textWord_about[注信W中textWord_about]
Fixed Code:http://jsfiddle.net/LUKGt/5/(without your stylesheets)
固定代码：http : //jsfiddle.net/LUKGt/5/（没有你的样式表）
Code:
代码：
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});?
回答by Andy
You don't necessarily have to use JavaScript for this, if your target audience are using browsers that support the :activepseudo class.
如果您的目标受众使用支持:active伪类的浏览器，则您不必为此使用 JavaScript 。
回答by Prem
I think, main thing you wouldn't have observed or missing is,
我认为，你不会观察到或错过的主要事情是，
You are using 'textword_about' instead of 'textWord_about'.
i.e you are using 'textWord_about' in html and 'textword_about' in javascript.
Try making them same i.e maintain both same in html and javascript.
尝试使它们相同，即在 html 和 javascript 中保持相同。
