jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范)

1.tab

2.tab-hd (选项栏)

3.tab-bd(选项栏对应的内容)

css代码(布局没问题,可以只看jquery代码)

*{padding: 0; margin: 0;}
ul {list-style: none; }
.tab {width:450px; height:200px; overflow: hidden; border:1px solid #ccc; margin: 0 auto; }
.tab-hd ul { overflow: hidden;  margin-left: -4px; }
.tab-hd li { float:left; width: 150px; border-left: 1px solid #ccc; border-bottom:1px solid #ccc; line-height: 50px; font-size: 24px; text-align: center; cursor:pointer;}
.tab-hd li.selected {border-bottom:none;}
.tab-bd li { display: none; font-size: 30px; line-height: 5; text-align: center; }

html代码:

<div class="tab">
	<div class="tab-hd">
		<ul>
			<li class="selected">项目一</li>
			<li>项目二</li>
			<li>项目三</li>
		</ul>
	</div>
	<div class="tab-bd">
		<ul>
			<li style="display:block;">111111</li>
			<li>222222</li>
			<li>333333</li>
		</ul>
	</div>
</div>

jq代码:

$(function(){
	$('.tab-hd li').click(function(){
		$(this).addClass('selected').siblings().removeClass('selected');//这个可写成下面代码
		/*
		 $('.tab-hd li').removeClass('selected');
		 $(this).addClass('selected');
		 */
		$('.tab-bd li').hide().eq($(this).index()).show();
	}).hover(function(){
		//可以加其他动画效果
	});
})

  

jq的选项卡tab的更多相关文章

  1. jq封装选项卡写法

    jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...

  2. 选项卡 tab切换

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

  3. VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

    作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...

  4. JQ实现选项卡(jQuery原型插件扩展)

    下边分为两个版本,一种是点击切换选项(index.js),一种是滑过切换选项(index1.js) HTML文件: jq使用jquery-1.11.3.js版本 <!DOCTYPE html&g ...

  5. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  6. jq 版的tab切换

    ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, c ...

  7. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

  8. Mui 选项卡 tab 高度 没有自适应....

    因为项目中 用到了 mui ,mui 的选项卡有时候无法自适应高度,这回导致有的tab 出现一大片空白区域... 从jquery 的 思路 是  用一个值 保存 当前 的 高度... 当 点击其他 t ...

  9. jq封装的tab切换

    function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active ...

随机推荐

  1. List 中对象属性排序

    有几个方法可以实现:让 Student 实现Comparable接口,或是实例化一 个比较器, 现在用 Comparator 比较器实例来做一个:ComparableTest.java import  ...

  2. iOS移动开发周报-第22期

    iOS移动开发周报-第22期 [摘要]:本期iOS移动开发周报带来如下内容:苹果股价创新高,iOS8自动调整UITableView布局,Swift学习心得等. 新闻 <苹果股价创新高 市值全球第 ...

  3. PCL 1.4.0 VS 2010 Configuration

    Open VS2010, create a new project, then open Property Manager, double-click Microsoft.Cpp.win32.user ...

  4. 在cmd下输入/g无效

    如图: 原来一:斜杠得是\ 二:命令和它之间没空格.这个符号和分号的使用是一样的.

  5. lucene 3.0.2 search 各种各样的Query类型

    http://blog.sina.com.cn/s/blog_61d2047c010195mo.html     lucene的这种各种各样的查询类型 1.TermQuery       最简单的Qu ...

  6. [转]ASP.NET中的forms验证

    本文转自:http://www.cnblogs.com/fengzheng126/archive/2012/04/06/2435513.html ASP.NET的安全认证:Windows验证 (默认) ...

  7. Scrum会议6(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  8. [IT扫盲]软件测试时期版本的称呼

    有时候搞不懂,还没发布时的软件怎么会就有那么多版本,今天彻底想了解一下. 早有人写好了. 请参考这里: http://baike.baidu.com/view/707808.htm#1_2 测试版 α ...

  9. 20145235《Java程序设计》课程总结

    每周读书笔记链接汇总 20145235<Java程序设计>第1周学习总结 20145235<Java程序设计>第2周学习总结 20145235<Java程序设计>第 ...

  10. <?php set_time_limit(10);

    <?php include('w_fun.php'); set_time_limit(10); Fatal error: Maximum execution time of 10 seconds ...