感谢您抽出宝贵时间阅读这篇文章。希望那些提出同样问题的人也会得到答案。
我正在一个单页网站上工作,分为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"> 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>
请提出解决方案!很多人感激不尽!
答案 0 :(得分:8)
选择器中有拼写错误。将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);
});
答案 1 :(得分:3)
如果目标受众使用支持:active
伪类的浏览器,则不一定要使用JavaScript。
答案 2 :(得分:0)
我认为,你不会观察或遗漏的主要事情是,
You are using 'textword_about' instead of 'textWord_about'.
i.e you are using 'textWord_about' in html and 'textword_about' in javascript.
尝试使它们相同,即在html和javascript中保持相同。