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

前端技术 2023/08/09 JavaScript

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

本文地址：https://www.stayed.cn/item/769

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案