0

tabify を使用した AJAX ボックスがあります。画像をアクティブにしたり、画像の上にカーソルを置いたりしたときに、画像をグレースケールから通常に変更する際に問題が発生しています。連続して 4 つの画像があります。1 つがクリックされると、通常の色に変わり、最初の色がグレースケールに戻るときに、別の色がクリックされるまでその状態を維持する必要があります。これはどのように行うことができますか？

プラグインはここにあります。私がやりたいことを示すサンプル画像を以下に示します。

HTML

<div id="key-wrap">

<h1>Key Team Members</h1>

<ul id="keyMember" class="keyMember">
<li class="active"><a href="#keyMember1"><div class="keyMember1"></div></a></li>
<li><a href="#keyMember2"><div class="keyMember2"></div></a></li>
<li><a href="#keyMember3"><div class="keyMember3"></div></a></li>
<li><a href="#keyMember4"><div class="keyMember4"></div></a></li>
</ul>

<div id="keyMember1" class="content">
<h2>Limerick One</h2>
<p> The limerick packs laughs anatomical<br />
In space that is quite economical,<br />
But the good ones I've seen<br />
So seldom are clean,<br />
And the clean ones so seldom are comical. </p>
</div>

<div id="keyMember2" class="content">
<h2>Limerick Two</h2>
<p> Let my viciousness be emptied,<br />
Desire and lust banished,<br />
Charity and patience,<br />
Humility and obedience,<br />
And all the virtues increased. </p>
</div>

<div id="keyMember3" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,<br />
A Mouse ran up the Clock,<br />
The Clock Struck One,<br />
The Mouse fell down,<br />
And Hickere Dickere Dock. 
</div>

<div id="keyMember4" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,<br />
A Mouse ran up the Clock,<br />
The Clock Struck One,<br />
The Mouse fell down,<br />
And Hickere Dickere Dock.   
</div>

</div> <!--End Key Wrapper-->

<script src="jquery.js" type="text/javascript" charset="utf-8"></script> 
<script src="jquery.tabify.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript">
        // <![CDATA[

        $(document).ready(function () {
            $('#keyMember').tabify();
        });

        // ]]>
    </script>

CSS

body {
font: 0.8em Arial, sans-serif;
}
#key-wrap {
width: 1000px;
margin: 0 auto;
background: whitesmoke;
height: 500px;
padding: 10px;
}
.keyMember {
padding: 0;
clear: both;
margin: 0 auto;
width: 1000px;
}
.keyMember li {
display: block;
}
.keyMember li a {
background: #ccf;
padding: 10px;
float: left;
border-bottom: none;
text-decoration: none;
color: #000;
font-weight: bold;
width: 228px;
height: 204px;
text-align: center;
line-height: 200px;
}
.keyMember li.active a {
background: #eef;
}
.keyMember1 {
background:url(members/fulanu.jpg) no-repeat center;
width: 228px;
height: 204px;
}
.keyMember2 {
background:url(members/fulanu.jpg) no-repeat center;
}
.keyMember3 {
background:url(members/fulanu.jpg) no-repeat center;
}
.keyMember4 {
background:url(members/fulanu.jpg) no-repeat center;
}
.content {
float: left;
clear: both;
border-top: none;
border-left: none;
background: #eef;
padding: 10px;
width: 980px;
margin: 30px auto;
}
4

2 に答える 2

0

HTML と CSS だけでは、これに対応できない場合があります。すでに jQuery が含まれているため、jQueryaddClassとremoveClassメソッド ( jQuery docs ) を参照することをお勧めします。

クリックしたときに必要に応じて CSS クラスが追加または削除されるように、ハンドラーを各画像にバインドできます。

于 2013-05-27T18:49:37.597 に答える