提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

jqueryTab效果和动态加载的简单实例

实例 简单 动态 效果 加载
2023-06-13 09:15:13 时间

一：tab效果显示

复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml"><head>
<title>无标题页</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>

<scriptsrc="js/jquery-1.4.2-vsdoc.js"type="text/javascript"></script>
<style>
html{font-size:12px;}
body{margin:50px;}
div,ul,li{margin:0;padding:0;}
#tab{width:200px;margin-top:20px;}
#tabli{float:left;height:20px;line-height:20px;border:1pxsolid#000;list-style:none;padding:3px6px;}
#tabli.on{background:#3CF;}
#bddiv{width:198px;border:1pxsolid#000;height:100px;text-align:center;line-height:100px;background:#3CF;}
#linksa{margin-right:10px;}
</style>
</head>
<body>
<spanid="links"><ahref="#">登录</a><ahref="#">注册</a></span>
<ulid="tab">
<liclass="on">登录</li>
<li>注册</li>
<divstyle="clear:both;"></div>
</ul>
<divid="bd">
<div>登录内容</div>
<div>注册内容</div>
</div>
<scripttype="text/javascript">
$(function(){
$("#bd>div:not(:first)").hide();//取id为bd下面第一个div，并且将不是第一个的隐藏起来
$("#tabli").mouseover(function(){//当鼠标移动过id为tab下面li标签时触发函数
varindex=$("#tabli").index(this);//取当前事件时的索引记录在index里面
$(this).addClass("on").siblings().removeClass("on");//将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除
//siblings()是取到兄弟节
$("#bd>div").eq(index).show().siblings().hide();//将id为bd下面的第index个div显示出来，将兄弟隐藏（如：$("p:eq(1)")意思是”选择第二个<p>元素“）
});
//$("#linksa").mouseover(function(){
//varindex=$("#linksa").index(this);
//$("#tabli").eq(index).trigger("click");
//});
});
</script>
</body>
</html>


二：Tab效果和动态加载
复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>

<scriptsrc="js/jquery-1.4.2-vsdoc.js"type="text/javascript"></script>

<scripttype="text/javascript">
$(function(){
$("#bd>div:not(:first)").hide();
$("#tabtd").mouseover(function(){
varindex=$("#tabtd").index(this);
$("#bd>div").eq(index).show().siblings().hide();
});
$("#bda").click(function(){
varlink=$("<td><ahref="http://www.baidu.com">百dddd</a></td>");
varlinks=$("<div><ahref="http://www.baidu.com">sdfsdfsd</a></div>");
$("#tab").append(link);//向id为tab下面追加link
$("#bd").append(links);//向id为bd下面追加links
});
});
</script>

<styletype="text/css">
#tabli.on
{
background:#3CF;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<table>
<trid="tab">
<td>
<ahref="http://www.baidu.com">百度</a>
</td>
<td>
<ahref="http://www.cnblogs.com">博客园</a>
</td>
<td>
<ahref="http://www.hao123.com">好123</a>
</td>
<td>
<ahref="http://www.163.com">163</a>
</td>
</tr>
</table>
<divid="bd">
<div>
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<HeaderTemplate>

</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
asfa
</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
azsac
</HeaderTemplate>
<ItemTemplate>
<%#Eval("StationName")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
azsac
</HeaderTemplate>
<ItemTemplate>
<ahref="#">
<%#Eval("StationName")%></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridViewID="GridView2"runat="server"AutoGenerateColumns="False">
<Columns>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Status"HeaderText="Status"/>
<asp:BoundFieldDataField="Certificate"HeaderText="Certificate"/>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridViewID="GridView3"runat="server"AutoGenerateColumns="False">
<Columns>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Status"HeaderText="Status"/>
<asp:BoundFieldDataField="Certificate"HeaderText="Certificate"/>
</Columns>
</asp:GridView>
</div>
<div>
<asp:GridViewID="GridView4"runat="server"AutoGenerateColumns="False">
<Columns>
<asp:BoundFieldDataField="Business"HeaderText="Business"/>
<asp:BoundFieldDataField="Status"HeaderText="Status"/>
<asp:BoundFieldDataField="Certificate"HeaderText="Certificate"/>
<asp:BoundFieldDataField="Status"HeaderText="Status"/>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>

相关文章