首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

适用的Jquery选项卡TAB

2013-09-06 
实用的Jquery选项卡TAB!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.

实用的Jquery选项卡TAB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>实用的Jquery选项卡</title><script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script><style type="text/css">.order_box .stitle {width: 825px;clear: right;height: 27px;border-bottom: 2px solid #A10000;}.order_box .stitle .close {width: 80px;height: 18px;border-top: 1px solid #dedede;border-left: 1px solid #dedede;border-right: 1px solid #dedede;background: #f1f1f1;color: #000;text-align: center;float: left;margin-right: 5px;padding-top: 8px;}.order_box .stitle .open {width: 82px;height: 20px;background: #A10000;color: #fff;text-align: center;float: left;margin-right: 5px;padding-top: 8px;overflow: hidden;}.order_box ul li {cursor: pointer;display: list-item;list-style:none;}</style><script type="text/javascript">        //选项卡切换        $(function () {            $(".stitle li").click(function () {                var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值                     $(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理                $(this).removeClass("close").addClass("open");                var content_obj = $(".cntorder")  //内容节点                content_obj.hide();                content_obj.eq(index_tab).show();            });        });</script></head><body><div class="order_box">  <div class="stitle">    <ul>      <li class="open">进行中</li>      <li class="close">已完成</li>      <li class="close">无效</li>    </ul>  </div>  <div class="cntorder" >tab1</div>  <div class="cntorder" style="display: none;">tab2</div>  <div class="cntorder" style="display: none;">tab3</div></div></body></html>

热点排行