模仿easyUI 实现tab切换

最新推荐文章于 2019-04-01 14:55:33 发布

kinbridge

最新推荐文章于 2019-04-01 14:55:33 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： easyui java

本文链接：https://blog.csdn.net/kinbridge/article/details/73557393

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模仿easyUI 实现tab切换

1: 复制easyui css的部分样式；

2：通过加载链接实现动态切换；

效果图：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright"
content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd.">
<title>EasyUI Web Admin Power by Wuyeguo</title>
<script type="text/javascript"
src="jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<style type="text/css">
.tabs-wrap{
position:relative;
left:0px;
overflow:hidden;
width:100%;
margin:0px;
padding:0px;
background-color: #E0ECFF;
border:1px;
}

.tabs{
list-style-type:none;
height:26px;
margin:0px;
padding:0px;
padding-left:4px;
font-size:12px;
width:5000px;
border-bottom:1px solid #8DB2E3;
}
.tabs li{
float:left;
display:inline-block;
margin-right:4px;
margin-bottom:-1px;
padding:0;
position:relative;
border:1px solid #8DB2E3;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
.tabs li a.tabs-inner{
display:inline-block;
text-decoration:none;
color:#416AA3;
background:url('images/tabs_enabled.png') repeat-x left top;
margin:0px;
padding:0px 10px;
height:25px;
line-height:25px;
text-align:center;
white-space:nowrap;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
.tabs li a.tabs-inner:hover{
background:url('images/tabs_active.png') repeat-x left bottom;
}
.tabs li.tabs-selected{
border:1px solid #8DB2E3;
border-bottom:1px solid #fff;
}
.tabs li.tabs-selected a.tabs-inner{
color:#416AA3;
font-weight:bold;
background:#fff;
background:#e0ecff url('images/tabs_active.png') repeat-x left bottom;
outline: none;
}

.tabs-container{
overflow:hidden;
background:#fff;
}
.tabs-header{
border:1px solid #8DB2E3;
background:#E0ECFF;
border-bottom:0px;
position:relative;
overflow:hidden;
padding:0px;
padding-top:2px;
overflow:hidden;
}

.tabs-icon {
position: absolute;
width: 16px;
height: 16px;
left: 10px;
top: 5px;
}

a:-webkit-any-link {
cursor: auto;
text-decoration: underline;
}

li {
display: list-item;
}

.tabs-closable {
padding-right: 8px;
}

</style>
</head>
<body>
<div id="tt" class="easyui-tabs tabs-container"
style="width: auto; height: auto;border: 1px;">
<div class="tabs-header">
<div class="tabs-scroller-left" style="display: none;"></div>
<div class="tabs-scroller-right" style="display: none;"></div>
<div class="tabs-wrap" >
<ul class="tabs">
<li class="tabs-selected"><a href="javascript:void(0)" class="tabs-inner"><span
class="tabs-title tabs-closable">AD</span><span class="tabs-icon"></span></a><a
href="javascript:void(0)" class="tabs-close"></a></li>
<li class=""><a href="javascript:void(0)"
class="tabs-inner"><span class="tabs-title tabs-closable">CAD</span><span
class="tabs-icon"></span></a><a href="javascript:void(0)"
class="tabs-close"></a></li>
<li class=""><a href="javascript:void(0)" class="tabs-inner"><span
class="tabs-title tabs-closable">SB</span><span class="tabs-icon"></span></a><a
href="javascript:void(0)" class="tabs-close"></a></li>
<li class=""><a href="javascript:void(0)" class="tabs-inner"><span
class="tabs-title tabs-closable">美团</span><span class="tabs-icon"></span></a><a
href="javascript:void(0)" class="tabs-close"></a></li>
</ul>
</div>
<div id="tablist">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//控制tab标签
$('ul li').click(function(){
// alert($(this).text())
var value = $(this).text();
$(this).siblings().removeClass('tabs-selected');
$(this).addClass('tabs-selected');
if(value === "AD"){
$("#tablist").html('<iframe scrolling="auto" frameborder="0" src="'+"http://www.iciba.com/?=2016pcChromebookmark"+'" style="width:100%;height:800px;"></iframe>');
}
else if(value ==="CAD"){
$("#tablist").html('<iframe scrolling="auto" frameborder="0" src="'+"https://zhidao.baidu.com/daily/view?id=64444"+'" style="width:100%;height:800px;"></iframe>');
}
else if(value ==="SB"){
$("#tablist").html('<iframe scrolling="auto" frameborder="0" src="'+"http://blog.csdn.net/chjttony/article/details/46647549"+'" style="width:100%;height:800px;"></iframe>');
}
else if(value ==="美团"){
$("#tablist").html('<iframe scrolling="auto" frameborder="0" src="'+"http://sz.meituan.com/?ref=360"+'" style="width:100%;height:800px;"></iframe>');
}
$("#tablist").load("http://www.iciba.com/"+"#tablist");
})

})
</script>
</body>
</html>