0

我有一个带有 tabify 的 AJAX 框。当我激活或将鼠标悬停在我的任何图像上时，我无法将图像从灰度变为正常。连续有4张图片；如果单击一个，它会变为正常颜色，并且应该保持这种状态，直到单击另一个，当第一个应该恢复为灰度时。如何才能做到这一点？

该插件可以在这里找到；下面是显示我想要做的示例图像。

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，您可能想看看 jQuery 的addClass和removeClass方法（jQuery 文档）。

您可以将处理程序绑定到每个图像，以便在单击时根据需要添加或删除 CSS 类。

于 2013-05-27T18:49:37.597 回答
0

我做的！！这都是 CSS，这就是我所做的......

.keyMember1 { background:#CCC; width: 226px; height: 204px; display:inline-block;                                                                                                                                                   position:relative;}
a:hover .keyMember1 { background:#699;}
li.active .keyMember1 {background:gold; }

.keyMember2 { background:#CCC; width: 226px; height: 204px; display:inline-block;    position:relative;}
a:hover .keyMember2 { background:#699;}
li.active .keyMember2 {background:green; }

.keyMember3 { background:#CCC; width: 226px; height: 204px; display:inline-block; position:relative;}
a:hover .keyMember3 { background:#699;}
li.active .keyMember3 {background:blue; }

.keyMember4 { background:#CCC; width: 226px; height: 204px; display:inline-block; position:relative;}
a:hover .keyMember4 { background:#699;}
li.active .keyMember4 {background:red; }
于 2013-05-28T12:07:55.243 回答