jquery Tab效果和动态加载的简单示例

发布时间：2023-08-22 14:57:42 所属栏目：教程来源：

导读：一：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

一：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;

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!