4

この投稿を読んでいただきありがとうございます。同じ質問をしている人たちも答えを得られることを願っています。

私は、8 つの大きな div に分割された単一ページの Web サイトに取り組んでいるので、メニュー バーをクリックすると、div (または「ページ」) の 1 つに移動します。

私のウェブサイトのイントロ セクションである div (またはページ) の 1 つで、この効果を導入しようとしています: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>

解決策を提案してください！とても有難い！

4

3 に答える 3

8

セレクターにタイプミスがあります。[内の文字にtextword_about注意textWord_about]に変更WtextWord_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);
});​
于 2012-10-10T16:39:27.817 に答える
3

:activeターゲット ユーザーが疑似クラスをサポートするブラウザーを使用している場合は、必ずしも JavaScript を使用する必要はありません。

純粋な CSS バージョン

于 2012-10-10T16:45:01.573 に答える
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 の両方を同じに維持してください。

于 2012-10-10T17:17:46.353 に答える