0

それぞれ独自の背景画像を持つ 5 つの div があります。各 div 内にはテキスト リンクがあります。div またはテキスト リンクのいずれかにマウスを合わせると、ロールオーバー効果が発生し、div の背景が入れ替わります。各 div のロールオーバー状態も固有であるため、div 1 (#colOne) は bgOne.png と bgOne_ro.png の間で、div 2 (#colTwo) は bgTwo.png と bgTwo_ro.png の間で交互に繰り返されます。

CSS を使用する場合は簡単ですが、ここで少し複雑になります。

テキスト リンクをクリックすると、親 div の背景が bg*_ro.png に変更され、マウス オフでも保持されるようになります。同時に、そのテキスト リンクに固有の非表示の div が表示されます。

この非表示の div には、独自の閉じるボタンがあります (おそらく、CSS で display:hidden を介して)。それを閉じると、それを明らかにしたテキスト リンクの親 div の背景が bg*.png にリセットされるようになります。非表示の div を表示する前と同じように動作するようになりました。

5 つのテキスト リンクがあるため、5 つの非表示の div が表示される可能性があります。一度に複数の非表示の div を表示することはできません。テキスト リンクをクリックすると、現在表示されている非表示の div が非表示になり、それに関連付けられている div が明らかに表示されます。

うまくいけば、物事をより明確にするのに役立つ構造コードをいくつか含めました。

どんな助けでも大歓迎です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
background-color:#333333;
margin: 0px;
padding: 0px;
}
#Container {
width:1000px;
margin:auto;
left:50%;
}
.Column {
width:199px;
height:700px;
float:left;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
text-align:center;
}
#colOne {
background-image: url(bgOne.png);
}
#colOne:hover {
background-image: url(bgOne_ro.png);
}
#colTwo {
background-image: url(bgTwo.png);
}
#colTwo:hover {
background-image: url(bgTwo_ro.png);
}
#colThree {
background-image: url(bgThree.png);
}
#colThree:hover {
background-image: url(bgThree_ro.png);
}
#colFour {
background-image: url(bgFour.png);
}
#colFour:hover {
background-image: url(bgFour_ro.png);
}
#colFive {
background-image: url(bgFive.png);
}
#colFive:hover {
background-image: url(bgFive_ro.png);
}
a {
position:relative;
text-align:center;
top:600px;
}
</style>
</head>
<body>
<div id="Container">
  <div class="Column" id="colOne">
    <a>Testing</a>
</div>
  <div class="Column" id="colTwo">
    <a>Testing</a>
</div>
  <div class="Column" id="colThree">
    <a>Testing</a>
</div>
  <div class="Column" id="colFour">
    <a>Testing</a>
</div>
  <div class="Column" id="colFive">
    <a>Testing</a>    
</div>
</div>
</body>
</html>
4

1 に答える 1

0 
$('.Column').click(function () {
  $('#Container').css('background-image', $(this).css('background-image'));
});
于 2012-05-05T03:20:23.727 に答える