如何通过单击div之外的按钮来更改div的内容? [英] How to change content of a div by clicking a button outside the div?

查看:111
本文介绍了如何通过单击div之外的按钮来更改div的内容?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

感谢您花时间阅读这篇文章。希望那些提出同样问题的人也会得到他们的答案。

Thanks for taking the time to read this post. Hope those who are asking the same question would get their answers too.

我在一个单一的网站上分为8个大div,所以当你点击菜单栏,它会带你到一个div(或页面)。

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

在其中一个div(或页面),这是我的网站,我想引入这种效果:http://jsfiddle.net/unbornink/LUKGt/

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,当你点击不同的按钮时显示不同的文本。

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.

我试图遵循 http://jsfiddle.net/unbornink/LUKGt/建议的所有步骤

I tried to follow all the steps suggested by http://jsfiddle.net/unbornink/LUKGt/. Unfortunately, I cannot get the button to fire.

这是我的工作代码:

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

请提出解决方案!很多APPRECIATED!

Please propose a solution! Much APPRECIATED!

推荐答案

textword_about 更改为 textWord_about [请注意, W code> textWord_about ]

There is typo in your selector. Change textword_about to textWord_about [Note the letter W in textWord_about]

修正代码 http://jsfiddle.net/LUKGt/5/ (没有您的样式表)

Fixed Code: http://jsfiddle.net/LUKGt/5/ (without your stylesheets)

strong>代码:

Code:

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

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

这篇关于如何通过单击div之外的按钮来更改div的内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆