Question

关于div背景图片切换的问题。jsp

有4个li，点击第一个，之后颜色变白，点击其他的以后之前的那个颜色变灰，另一个变白，白色和灰色时2张图片!!!!答对了加分
<c:forEach var="wiki" items="${service.wikis}" varStatus="status">
<c:choose>
<c:when test="${status.index == 0}">
<li><a href="${pageContext.request.contextPath}/wiki/${service.code}/${wiki.code}/doc" onclick="changes(${status.index})">
<img id="tab_${status.index}" src="${pageContext.request.contextPath}/resources/pic/Tab.png"/>
<p id="word_${status.index}" >${wiki.name}</p>
</a></li>
</c:when>

<c:when test="${status.index != 0 && wiki.name != '管理控制台'}">
<li><a href="${pageContext.request.contextPath}/wiki/${service.code}/${wiki.code}/doc" onclick="changes(${status.index})">
<img id="tab_${status.index}" src="${pageContext.request.contextPath}/resources/pic/Tab2.png"/>
<p id="word_${status.index}" >${wiki.name}</p>
</a></li>
</c:when>

<c:when test="${status.index != 0 && wiki.name == '管理控制台'}">
<li><a href="${wiki.code }" onclick="changes(${status.index})">
<img id="tab_10" src="${pageContext.request.contextPath}/resources/pic/Tab2.png"/>
<p id="word_10" >${wiki.name}</p>
</a></li>
</c:when>

<c:otherwise>

</c:otherwise>
</c:choose>

</c:forEach>
能吧代码都附上的加分！！！！！！

Answer 1

jsp写的好复杂，直接用jquery实现就可以了吧...

$("li").on("click",function(){
    $(this).addClass("active").siblings("li").removeClass("active");
}).eq(0).trigger("click");

接下来就是css的问题了
li{background:灰色背景}
li.active{background:白色背景}

追问

大哥能不能具体一点，，，我时初学者，然后白色和灰色时2张图片形式

追答

具体代码就是上面这些呀！css里面的背景改成图片就好啦，background:url(images/bg.jpg)就这种写法。全部代码就上面这些，效果就可以实现

Answer 2

思路如下：

Juqery:
$('ul li').click(function(){
$('ul li').removeClass('selectClass').addClass('optionClass');
$(this).removeClass('optionClass').addClass(''selectClass);
});

Css:

.selectClass{
backgrand-color:white;
}
.optionClass{
backgrand-color:gray;
}

注意在你的 <li>标签给每个加上class='optionClass'.

追问

能不能再详细一点，本人小白

追答

jquery你会不？你把Juqery，CSS代码加上去 ,
再给你的4个li加上dlass='optionClass'，像这样

你说是图片那改成这样：
.selectClass{
backgrand:url(白色图片路径);
}
.optionClass{
backgrand:url(灰色图片路径);
}

追问

今早上刚看完jquery会了点。不过用你的方法点击还是没有反应。。不知道什么问题

追答

- -。 你加Jquery.js插件没？会调用Jquery方法吗？

$(function(){
$('ul li').click(function(){
$('ul li').removeClass('selectClass').addClass('optionClass');
$(this).removeClass('optionClass').addClass(''selectClass);
});
})