一般国外的网站很注重细节,他们会把菜单或者button做成图片,并且还有hover和selected状态。
如果仅仅是单独的button,可以addClass("xx")或者removeClass("xx"),xx是固定值,
但是对于一组菜单或者button,这个时候需要动态地给每个标签加一个对应状态的class,来控制显示样式。
例如下面这样:
<ul>
<li class="logo1">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
selected的时候:
<ul>
<li class="logo1 logo1-selected">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
hover的时候:
<ul>
<li class="logo1 logo1-selected logo1-hover">logo1</li>
<li class="logo2">logo2</li>
<li class="logo3">logo3</li>
</ul>
<script type="text/javascript"> $(function(){ $("ul li").each(function(){ var currentClass = $(this).attr("class"); $(this).hover( function(){ removeHover(); $(this).addClass(currentClass+"-hover"); }, function(){ removeHover(); } ) $(this).click(function(){ removeHoverSelected() $(this).addClass(currentClass+"-selected"); }) }) }) function removeHover(){ $("ul li").each(function(){ var classNames = $(this).attr("class").split(" "); for(var i = 0;i<classNames.length;i++){ if(classNames[i].indexOf("hover") > -1){ $("ul li").removeClass(classNames[i]); } } }) } function removeHoverSelected(){ $("ul li").each(function(){ var classNames = $(this).attr("class").split(" "); for(var i = 0;i<classNames.length;i++){ if(classNames[i].indexOf("selected") > -1 || classNames[i].indexOf("hover") > -1){ $("ul li").removeClass(classNames[i]); } } }) } </script>
这种方法对N个元素的菜单组或者button组都适用。