css+Jquery创建Tab切换效果:
2008-12-29 20:20
330 查看
css+Jquery创建Tab切换效果:
效果如图:
创建代码如下:
注:在测试该代码前,应将jquery.js引入
<!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>
<title>无标题页</title>
<script src="../Js/jquery.js" type="text/javascript"></script>
<style type="text/css">
*
{
padding:0px;
margin:0px;
font-size:12px;
}
.tabPanel
{
margin-bottom:10px;
width:400px;
}
ul.tabs
{
background:black url(../Images/bg_tab.gif) repeat-x scroll 0 0;
border-right:1px solid #DEDEDE;
height:28px;
line-height:28px;
overflow:hidden;
}
ul.tabs li
{
float:left;
}
.selected
{
color:Green;
background:transparent url(../Images/bg_tab_selected.gif) no-repeat scroll 0 0;
border-left:0 none;
border-right:1px solid #A4B2BD;
}
ul.tabs li a {
border-left:1px solid #DEDEDE;
color:#111111;
display:block;
float:left;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:0 10px;
text-decoration:none;
}
.panelPadding {
background-color:Maroon;
border-width:0 1px 1px;
border-color:-moz-use-text-color #A4B2BD #A4B2BD;
border-style:none solid solid;
overflow:hidden;
}
.panelTable
{
}
.panelPadding img
{
width:100%;
height:300px;
}
</style>
<script type="text/javascript">
/*点击Tab切换动态加载数据*/
function loadData(tabIndex)
{
$("#panelPadding1 .panelTable").html("");
var t=$("#tabPanel1 .selected");
$("#panelPadding1 .panelTable").append("<img src='"+t[0].title+"' title='"+t.html()+"' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' />
}
//tabPanel组件用于切换tab的动作
function tabSwitch(itemID,pannelID)
{
var tabBtn=$("#"+pannelID+" .tabs a");
for(var i=0;i<tabBtn.length;i++)
{
if(tabBtn[i].id==itemID)
{
tabBtn[i].className="selected";
}
else
{
tabBtn[i].className="";
}
}
}
$(function(){
$("#panelPadding1 .panelTable").append("<img src='../Images/U10P1T1D126887F9DT20081215151307.jpg' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' />
});
</script>
</head>
<body>
<div style="margin-left:200px;margin-top:100px;">
<div id="tabPanel1" class="tabPanel">
<ul class="tabs">
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('0');" href="###" id="item0" title="../Images/U10P1T1D126887F9DT20081215151307.jpg">
图片一</a></li>
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('1');" href="###" id="item1" title="../Images/2feba09120a4bee45656e142d298cc06.jpg">
图片二</a></li>
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('2');" href="###" id="item2" title="../Images/4.jpg">
图片三</a></li>
</ul>
<div id="panelPadding1" class="panelPadding">
<div class="panelTable" id="resultTable">
</div>
</div>
</div>
</div>
</body>
</html>
效果如图:
创建代码如下:
注:在测试该代码前,应将jquery.js引入
<!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>
<title>无标题页</title>
<script src="../Js/jquery.js" type="text/javascript"></script>
<style type="text/css">
*
{
padding:0px;
margin:0px;
font-size:12px;
}
.tabPanel
{
margin-bottom:10px;
width:400px;
}
ul.tabs
{
background:black url(../Images/bg_tab.gif) repeat-x scroll 0 0;
border-right:1px solid #DEDEDE;
height:28px;
line-height:28px;
overflow:hidden;
}
ul.tabs li
{
float:left;
}
.selected
{
color:Green;
background:transparent url(../Images/bg_tab_selected.gif) no-repeat scroll 0 0;
border-left:0 none;
border-right:1px solid #A4B2BD;
}
ul.tabs li a {
border-left:1px solid #DEDEDE;
color:#111111;
display:block;
float:left;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:0 10px;
text-decoration:none;
}
.panelPadding {
background-color:Maroon;
border-width:0 1px 1px;
border-color:-moz-use-text-color #A4B2BD #A4B2BD;
border-style:none solid solid;
overflow:hidden;
}
.panelTable
{
}
.panelPadding img
{
width:100%;
height:300px;
}
</style>
<script type="text/javascript">
/*点击Tab切换动态加载数据*/
function loadData(tabIndex)
{
$("#panelPadding1 .panelTable").html("");
var t=$("#tabPanel1 .selected");
$("#panelPadding1 .panelTable").append("<img src='"+t[0].title+"' title='"+t.html()+"' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' />
}
//tabPanel组件用于切换tab的动作
function tabSwitch(itemID,pannelID)
{
var tabBtn=$("#"+pannelID+" .tabs a");
for(var i=0;i<tabBtn.length;i++)
{
if(tabBtn[i].id==itemID)
{
tabBtn[i].className="selected";
}
else
{
tabBtn[i].className="";
}
}
}
$(function(){
$("#panelPadding1 .panelTable").append("<img src='../Images/U10P1T1D126887F9DT20081215151307.jpg' /> "); //<img src='"+t[0].title+"' title='"+t[0].html()+"' />
});
</script>
</head>
<body>
<div style="margin-left:200px;margin-top:100px;">
<div id="tabPanel1" class="tabPanel">
<ul class="tabs">
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('0');" href="###" id="item0" title="../Images/U10P1T1D126887F9DT20081215151307.jpg">
图片一</a></li>
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('1');" href="###" id="item1" title="../Images/2feba09120a4bee45656e142d298cc06.jpg">
图片二</a></li>
<li><a onclick="tabSwitch(this.id,'tabPanel1');loadData('2');" href="###" id="item2" title="../Images/4.jpg">
图片三</a></li>
</ul>
<div id="panelPadding1" class="panelPadding">
<div class="panelTable" id="resultTable">
</div>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 转：jquery实现tab切换效果及js css ajax推荐
- CSS+Jquery打造的一款可以自动切换(播放)的TAB滑动门效果
- js+css tab菜单切换效果
- Jquery封装tab自动切换效果的具体实现
- 几行简单的jQuery代码搞定tab标签切换效果
- 37个Ajax和CSS实现的Tab选项卡切换效果界面
- css配合JavaScript实现tab标签切换效果
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery+css实现的tab切换标签(兼容各浏览器)
- jquery 自动切换tab效果代码
- jquery实现的仿天猫侧导航tab切换效果
- 纯DIV+CSS简单实现Tab选项卡左右切换效果
- 纯CSS完成tab实现5种不同切换对应内容效果
- 简洁的CSS滑动门效果,也就是TAB标签切换效果
- jquery+css实现动感的图片切换效果
- jquery实现tab标签选项卡自动切换效果
- Jquery封装tab自动切换效果的具体实现
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery实现的一个tab切换效果内部还嵌有切换
- 37个Ajax和CSS实现的Tab选项卡切换效果界面【转载】