实用的Jquery选项卡TAB示例代码

网络编程 发布日期:2024/10/10 浏览次数:1

正在浏览:实用的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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js"><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>
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。