<!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 type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<style type="text/css">
body{font-size:13px}
ul,li {margin:0;padding:0;list-style:none}
#menu li {text-align:center;float:left;padding:5px;
margin-right:2px;width:50px;cursor:pointer}
#menu li.tabFocus {width:50px; font-weight:bold;
background-color:#f3f2e7;border:solid 1px #666;
border-bottom:0;z-index:100;position:relative}
#content {width:260px;height:80px;padding:10px;
background-color:#f3f2e7;clear:left;
border:solid 1px #666;position:relative;top:-1px}
#content li{display:none}
#content li.conFocus{display:block}
</style>
<script type="text/javascript">
$(function() {
$("#menu li").each(function(index) { //带参数遍历各个选项卡
$(this).click(function() { //注册每个选卡的单击事件
$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
$(this).addClass("tabFocus"); //增加当前选中项的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show()
.siblings().hide();
});
});
})
</script>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场,产品丰富多彩</li>
</ul>
</body>
</html>
分享到:
相关推荐
选项卡 网页选项卡选项卡 网页选项卡选项卡 网页选项卡选项卡 网页选项卡
jQuery Tab 可关闭的网页选项卡特效,网页上的标签效果,每个TAB标签都可以关闭,就像现在主流的163邮箱、QQ邮箱中的效果,模拟出了PC浏览器的效果,选项卡可以无限制增多,超出宽度会出现滚动条,本演示页面中包括...
JQuery技术实现网页选项卡 代码: <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> $(function () { $("ul li").click(function () { var indexID = $(this).index(); $(this)....
.net实例程序,实现母版页的选项卡操作
实现选项卡切换功能,功能完善,界面美观,操作方便!
各种样式网页选项卡 挺漂亮的 web上 希望大家喜欢
渐入渐出效果的Tabs网页选项卡 渐入渐出效果的Tabs网页选项卡 渐入渐出效果的Tabs网页选项卡 渐入渐出效果的Tabs网页选项卡 渐入渐出效果的Tabs网页选项卡
一款非常漂亮的网页选项卡,从老外站上收集的,与普通网页选项卡不同的是,它可以多层嵌套,即选项卡内还可以有选项卡,有JS版的,也有AJAX版的。
三种简洁的Tab导航(网页选项卡) Tab导航 网页选项卡 滑动门 选项卡切换
完全css编写 没有js 网页选项卡 功能强大
ASP.NET源码——网页选项卡(div+CSS).zip
嵌套的网页选项卡,菜单加载的样式,tags的各种显示,默认现实,动态现实。 开发人员必备的学习代码和使用代码。
兼容性好的网页选项卡效果 适合自定义选项卡 适用于各种浏览器
网页选项卡特效从网上收集的。效果也不是太好。。。。。。。。。。。。。。。
很漂亮的网页选项卡,和滑动门类似,鼠标放上与移开以及点击后都有不同的颜色,绝对完美,CSS+JavaScript结合打造,换到你网站上绝对不失色!
网页选项卡,TAB竖向排列,美化的差不多吧,最有特点的是TAB是垂直排列的,这个根据自己的需求吧,有横向的有竖向的,原理都是一样的,只是CSS部分排列的问题。
jquery 实现选项卡功能 不管是对于应用程序还是web 程序来说都是非常重要的 使用 web 实现网页选项卡 原理很简单 通过切换选项卡来显示不同的 内容