您的位置：首页 > Web前端 > JQuery

使用CSS和jQuery实现tab页

2014-05-23 14:21 316 查看

使用jquery来操作DOM是极大的方便和简单，这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法，下面是html文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css">
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0.1.js"></script>
<script>
$(document).ready(function() {
initTabView();
});

function initTabView()
{
$('.tab-item-content').hide();
$('.tab-item-content:first').show();
$('.tab-header li:first a').addClass('active-tab');
$('.tab-item-header').click(function(){
$('.tab-item-header').each(function(){
$(this).removeClass('active-tab');
});
$(this).addClass('active-tab');
var index = $(this).parent().index() + 1;
$('.tab-item-content').hide();
$('.tab-item-content:nth-child(' + index + ')').show();
});
}

</script>
<style type="text/css">
.tab-view:
{
width:90%;
margin:0 auto;
padding:0;
}

.tab-header, .tab-content
{
list-style:none;
width:100%;
margin:0 auto;
padding:0;
}

.tab-content
{
border:1px solid blue;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-right-radius:10px;
}

.tab-header li
{
display:inline;
margin:0;
padding:0;
}

.tab-item-header
{
width:auto;
padding-left:5px;
padding-right:5px;
border:1px solid blue;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:gray;
}
.active-tab
{
background-color:yellow;
}

</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>header</h1>
</div>
<div data-role="content">
<div class="tab-view">
<ul class="tab-header">
<li><a class="tab-item-header">cpu1</a></li>
<li><a class="tab-item-header">cpu2</a></li>
<li><a class="tab-item-header">cpu3</a></li>
<li><a class="tab-item-header">cpu4</a></li>
</ul>
<ul class="tab-content">
<li class="tab-item-content">
<div style="90%; margin:0 auto;">
<label for="name">姓名：</label>
<input type="text" id="name">
<label for="pass">密码：</label>
<input type="text" id="pass">
</div>

</li>
<li class="tab-item-content">
<div  style="90%; margin:0 auto;">
<label for="select">选择</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</li>
<li class="tab-item-content">
<p>3</p>
</li>
<li class="tab-item-content">
<p>4</p>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed"  data-theme="b">
<h1>footer</h1>
</div>
</div>
</body>
</html>

我的思路其实很简单就是根据所选择的header的索引来控制content的可见性，其中颜色、布局这些的比较随便还请见谅，下面是效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航