tab

最新推荐文章于 2024-10-28 11:22:19 发布

iteye_11495

最新推荐文章于 2024-10-28 11:22:19 发布

阅读量80

点赞数

文章标签： xhtml javascript ViewUI

本文介绍了一个使用jQuery实现的简单选项卡插件示例。该插件通过JavaScript控制不同内容区块的显示与隐藏，实现了基本的选项卡功能。文章展示了如何设置HTML结构、编写CSS样式以及使用jQuery进行交互控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 runat="server">
<title></title>
<script src="../js/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#tabs-2').css('display', 'none');
$('#tabs-3').css('display', 'none');
$('#tabs-4').css('display', 'none');
$('ul li').click(function () {
$('#tabs-1').css('display', 'none');
$('#tabs-2').css('display', 'none');
$('#tabs-3').css('display', 'none');
$('#tabs-4').css('display', 'none');
if ($(this).attr('id') == '1') $('#tabs-1').show();
if ($(this).attr('id') == '2') $('#tabs-2').show();
if ($(this).attr('id') == '3') $('#tabs-3').show();
if ($(this).attr('id') == '4') $('#tabs-4').show();
});

});

</script>
<style type="text/css">

ul.tab

{

background-color:#CCC;
height:25px;
padding-top:10px;
overflow:hidden;}
ul.tab li

{

float:left;

list-style-type: none;

padding-left:16px;

padding-right:16px;

border-left:#999 1px solid;

margin-left:-1px;

line-height:14px;

font-size:12px;
cursor: pointer;
color:#F00
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div id="details">
<ul class="tab">
<li id="1"><a href="#">demo1</a></li>
<li id="2"><a href="#">demo2</a></li>
<li id="3"><a href="#">demo3</a></li>
<li id="4"><a href="#">demo4</a></li>
</ul>

<div id="tabs">
<div id="tabs-1">
<p>111111111111111111111111111111111111111111111111111111111111111111111</p>
</div>
<div id="tabs-2">
<p>22222222222222222222222222222222222222222222222222222222222222222222222</p>
</div>
<div id="tabs-3">
<p>333333333333333333333333333333333333333333333333333333333333333333333333333333</p>
</div>
<div id="tabs-4">
<p>rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
</div>
</div>
</div>

</form>
</body>
</html>