jquery Tab效果和动态加载的简单实例
2013-12-11 00:00
736 查看
一:tab效果显示
二:Tab效果和动态加载
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>无标题页</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="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;} #tab li{ float:left; height:20px; line-height:20px; border:1px solid #000; list-style:none; padding:3px 6px;} #tab li.on{ background:#3CF;} #bd div{ width:198px; border:1px solid #000; height:100px; text-align:center; line-height:100px;background:#3CF;} #links a{ margin-right:10px;} </style> </head> <body> <span id="links"><a href="#">登录</a><a href="#">注册</a></span> <ul id="tab"> <li class="on">登录</li> <li>注册</li> <div style="clear:both;"></div> </ul> <div id="bd"> <div>登录内容</div> <div>注册内容</div> </div> <script type="text/javascript"> $(function() { $("#bd>div:not(:first)").hide(); //取id为bd下面第一个div,并且将不是第一个的隐藏起来 $("#tab li").mouseover(function() { //当鼠标移动过id为tab 下面li标签时触发函数 var index = $("#tab li").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> 元素“) }); // $("#links a").mouseover(function() { // var index = $("#links a").index(this); // $("#tab li").eq(index).trigger("click"); // }); }); </script> </body> </html>
二:Tab效果和动态加载
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#bd>div:not(:first)").hide(); $("#tab td").mouseover(function() { var index = $("#tab td").index(this); $("#bd>div").eq(index).show().siblings().hide(); }); $("#bd a").click(function() { var link = $("<td><a href='http://www.baidu.com'>百dddd</a></td>"); var links = $("<div><a href='http://www.baidu.com'>sdfsdfsd</a></div>"); $("#tab").append(link); //向id为tab下面追加link $("#bd").append(links); //向id为bd下面追加links }); }); </script> <style type="text/css"> #tab li.on { background: #3CF; } </style> </head> <body> <form id="form1" runat="server"> <table> <tr id="tab"> <td> <a href="http://www.baidu.com">百度</a> </td> <td> <a href="http://www.cnblogs.com">博客园</a> </td> <td> <a href="http://www.hao123.com">好123</a> </td> <td> <a href="http://www.163.com">163</a> </td> </tr> </table> <div id="bd"> <div> <asp:GridView ID="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> <a href="#"> <%#Eval("StationName")%></a> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> <div> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Status" HeaderText="Status"/> <asp:BoundField DataField="Certificate" HeaderText="Certificate"/> </Columns> </asp:GridView> </div> <div> <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Status" HeaderText="Status"/> <asp:BoundField DataField="Certificate" HeaderText="Certificate"/> </Columns> </asp:GridView> </div> <div> <asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Business" HeaderText="Business"/> <asp:BoundField DataField="Status" HeaderText="Status"/> <asp:BoundField DataField="Certificate" HeaderText="Certificate"/> <asp:BoundField DataField="Status" HeaderText="Status"/> </Columns> </asp:GridView> </div> </div> </form> </body> </html>
相关文章推荐
- jquery Tab效果和动态加载的简单实例
- JQuery页面随滚动条动态加载效果的简单实现(推荐)
- jquery实现简单的轮换出现效果实例
- js(JavaScript)实现TAB标签切换效果的简单实例
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- 动态加载jQuery的两种方法实例分析
- 利用jQuery实现简单的拖曳效果实例代码
- jquery实现的一个简单进度条效果实例
- jQuery实现的超简单点赞效果实例分析
- jquery实现弹出层遮罩效果的简单实例
- jQuery简单实现tab选项卡切换效果
- html、css和jquery相结合实现简单的进度条效果实例代码
- 手写简单的jQuery雪花飘落效果实例
- jquery实现图片滚动效果的简单实例
- jquery写的tab切换效果 非常简单
- jquery实现简单的拖拽效果实例兼容所有主流浏览器
- jQuery实现动画效果的简单实例
- jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
- Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
- AJAX jQuery tab,动态加载选显卡