我的一段代码
<script language="javascript">
function xx(n){
if(n==1){
document.getElementById("whatsNew").style.display = "block";
document.getElementById("specialsDefault").style.display = "none";
document.getElementById("featuredProducts").style.display = "none";
document.getElementById("new_product").className = "on";
document.getElementById("specials_product").className = "off";
document.getElementById("featured_product").className = "off";
}
if(n==2){
document.getElementById("whatsNew").style.display = "none";
document.getElementById("specialsDefault").style.display = "block";
document.getElementById("featuredProducts").style.display = "none";
document.getElementById("new_product").className = "off";
document.getElementById("specials_product").className = "on";
document.getElementById("featured_product").className = "off";
}
if(n==3){
document.getElementById("whatsNew").style.display = "none";
document.getElementById("specialsDefault").style.display = "none";
document.getElementById("featuredProducts").style.display = "block";
document.getElementById("new_product").className = "off";
document.getElementById("specials_product").className = "off";
document.getElementById("featured_product").className = "on";
}
}
</script>
<div id="select">
<div id="new_product" onmouseover="xx(1);" class="on">New Arrivals</div>
<div id="specials_product" onmouseover="xx(2);">Top Sellers</div>
<div id="featured_product" onmouseover="xx(3);">Featured Picks</div>
</div>
现在的结果是,每个涵数的前三句都执行了,但后三句document.getElementById("......").className = "!!!";执行不了,也就是,样式虽然换了,class还是不变,怎么办,后三句哪错了啊
jquery可以使用attr()或prop()方法修改类名,javascript可以修改对象的className属性,关键代码如下:
$("#test").attr("class","blue");实例演示如下:
1、HTML结构
<style>2、jquery代码
$(function(){3、效果演示
javascript: document.getElementById("XX").addClass("xxx");
jquery: $("#id").atrr("class","classname");$("#id").removeAtrr("class","classname");