javascript - 如何通过单击 div 外的按钮来更改 div 的内容？

感谢您花时间阅读这篇文章。希望问同样问题的人也能得到答案。

我正在处理一个分为 8 个大 div 的单页网站，因此当您单击菜单栏时，它会将您带到其中一个 div(或“页面”)。

在我网站的介绍部分的 div(或页面)之一上，我试图介绍这种效果:http://jsfiddle.net/unbornink/LUKGt/

我有一排按钮，例如“我们是谁”、“我们做什么”、“我们如何思考”……我在这一行按钮下有一个 div，当您单击不同的按钮时，会显示不同的文本。

我尝试按照 http://jsfiddle.net/unbornink/LUKGt/ 建议的所有步骤进行操作。不幸的是，我无法触发按钮。

这是我的工作代码:

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

请提出解决方案!非常感激!

最佳答案

您的选择器中有错字。将 textword_about 改为 textWord_about 【注意 W 中的字母 textWord_about 】

固定代码: http://jsfiddle.net/LUKGt/5/(没有你的样式表)

代码:

$('.textWord_about').hide();

$('.link').click(function() {
    $('.textWord_about').hide();
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});

关于javascript - 如何通过单击 div 外的按钮来更改 div 的内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12824241/