<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>网页选项卡应用</title>
<script src="jquery-2.1.0.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:1px solid #666;
border-bottom:0;
z-index:100;
position:relative;
}
#content {
width: 260px;
height: 90px;
padding: 10px;
background-color: #00ff21;
clear: left;
border: 1px solid #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");
$("#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网页选项卡应用的更多相关文章

  1. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

  2. jquery实现的网页选项卡(拾忆)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  4. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  6. jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...

  7. jQuery的选项卡

    jQuery的选项卡 下面请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  8. jquery实现网页选项卡

    这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击 ...

  9. jQuery应用操作之---网页选项卡(tabs)

    示例: <div class="tab"> <div class="tab_menu"> <ul> <li class ...

随机推荐

  1. Alert方法重写

    在正规项目中,总感觉alert框是非常难看的,但是有的时候又必须添加alert框来给用户一种警醒,废话不多说,先上图

  2. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  3. 异步编程设计模式Demo - AsyncComponentSample

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...

  4. Android-2

    传递简单数据 //发送方i.putExtra("data",t.getText().toString()); //接收方Intent i = getIntent();m = (Ed ...

  5. ReactiveCocoa v2.5 源码解析 之 架构总览

    ReactiveCocoa 是一个 iOS 中的函数式响应式编程框架,它受 Functional Reactive Programming 的启发,是 Justin Spahr-Summers 和 J ...

  6. jQuery对象转换为DOM对象

    第一种方法:借助数组下标来读取jQuery对象集合中的某个DOM元素对象. <script src="Scripts/jquery-1.4.1.js" type=" ...

  7. Windows文件居然有解锁一说,并且还会引起SignTool Error,真是昏倒!

    I'm running Windows 7 and when I try to run a batch file, it says, "The publisher could not be ...

  8. <转载>linux gcc编译器中使用gdb单步调试程序,程序不是顺序执行的。

    原文地址http://blog.csdn.net/abc78400123/article/details/6779108 在用gdb调试,使用s 或n单步执行程序时,发现程序不是按顺序运行的,有时莫名 ...

  9. python高级编程(第12章:优化学习)2

    #优化策略 #3个原则 """ 1a:寻找其他原因:确定第三方服务器或资源不是问题所在 2a:度量硬件:确定资源足够用 3a:编写速度测试:创建带有速度要求的场景 &qu ...

  10. Cookie知识点小结

    问题是什么?有哪些技术?如何解决? 1. Cookie 1)完成回话跟踪的一种机制:采用的是在客户端保存Http状态信息的方案 2)Cookie是在浏览器访问WEB服务器的某个资源时,由WEB服务器在 ...