Jquery修改CSS样式

来源:互联网 发布:淘宝客服电话沟通技巧 编辑:程序博客网 时间:2024/06/10 01:00

Jquery功能确实强大,刚刚开发了一个Jquery控制CSS样式的DEMO,如下:

<!DOCTYPE html ><html><head><meta  charset="UTF-8"><title>DivDemo</title><style type="text/css">.Frame{width:260px;border:solid 1px #666;font-size:10pt;text-align:center;}.title{background-color:red;padding:5px;}.Content{padding:5px;display:none;}.current{background-color:green;}</style><script type="text/javascript" src = "js/jquery-1.8.2.js"></script><!-- 引入Jquery文件库 --><script type="text/javascript">$().ready(function (){$(".title").click(  //点击主题时的事件function (){$(this).addClass("current").next(".Content").css("display","block");//切换主题颜色,以及修改主题下面Content的样式});});</script></head><body><div class = "Frame"><div class = "title">主题</div><div class = "Content"><a href = "#">One</a><br><a href = "#">Two</a><br><a href = "#">Three</a></div></div></body></html>

原创粉丝点击