基于jquery的9行js轻松实现tab控件示例

2024-03-17 13:28:48

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/**
* 考虑到tab和pane有可能被动态的添加和删除，
* 所以每次都废点时间去查找先前被激活的tab
*/
var tab = function(tabId,activeId){
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){
$("#"+$("#"+activeId).attr("tar")).css("display","none");
$("#"+activeId).removeAttr("id");

$(this).attr("id",activeId);
$("#"+$(this).attr("tar")).css("display","block");
});
};
</script>
</head>
<style>
li{
border:1px solid #b5e2f3;
border-bottom:0px;
float:left;
width:100px;
height:25px;
margin:0 7px;
background:#F1FEF3;
padding:9px 0 0 0;
text-align:center;
color:#33a3dc;
cursor:pointer;
}
ul{
width:800;
height:36px;
border-bottom:1px solid #b5e2f3;
}
#selected{
background:#FFF!important;
border-bottom:2px solid #FFF!important;
}
ul{margin:-1px;}
#cate1,#cate2, #cate3, #cate4, #cate5{
clear:both;
height:300px;
background:#FFFFFF;
width:800px;
height:100px;
padding:25px;
border:1px solid #b5e2f3;
}
</style>
<body>
<div id="tab">
<ul>
<li tar="cate1" id="selected">1</li>
<li tar="cate2">2</li>
<li tar="cate3">3</li>
<li tar="cate4">4</li>
</ul>
</div>
<div>
<div id="cate1" style="display:block;">
1
</div>
<div id="cate2" style="display:none;">
2
</div>
<div id="cate3" style="display:none;">
3
</div>
<div id="cate4" style="display:none;">
4
</div>
</div>
</body>
<script>
tab("tab","selected");
</script>
</html>

基于jquery的9行js轻松实现tab控件示例

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> /**
基于jquery跨浏览器显示的file上传控件

前面我写过一篇短小的文章,简要的介绍了下怎样定义input type="file" 的样式.对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式,原文:<定义input type="file" 的样式> 其实要实现给file控件定义样式,大致思想都是一样的. 今天看到博客园的繁花连写两篇文章来研究file控件 <jquery.fileEveryWhere.js--一个跨浏览器的file显示插件> <firefox
JS添加或修改控件的样式(Class)实现方法

使用js 给页面组件添加class 或者删除class,以及使用jquery的方式添加或修改. <input id="txtBianCeng" type="text" /> .lezhu99 { color:#cc0000; } 添加或修改样式(Class) document.getElementById("txtBianCeng").className = "lezhu99"; 删除样式(Class) docum
jquery实现pager控件示例

js: 复制代码代码如下: $.fn.extend({ JPager: function (cfg, pageIndex, pageSize) { if (cfg && pageIndex > 0 && pageSize>0) { var token = "#" + this.attr("id"); this.empty(); var pageFirst = functio
详解JS与APP原生控件交互

"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显得重要,不可能每次发布一个活动,都要发布一个现版本,当然这样对于Android还算可以,但是对于Ios呢?苹果应用商店每次审核的时间基本都在1~2周,这对于一个促销活动来说审核时间实在太长.而混合式开发正好可以解决这个问题,基本的原理时,通过原生控件实现APP的主体结构,借助H5开发对应的页面,这样每次发布活
Android基于AdapterViewFlipper实现的图片/文字轮播动画控件

1. 问题/坑点 1.1 item宽高不生效问题需要注意的是,AdapterViewFlipper 在布局时,宽高一定要用 match_parent 或者具体dp值. 如果宽.高中使用了 wrap_content 时,会导致 AdapterViewFlipper 容器的宽高,最终变成第一个item的宽高.即使后续item的宽高超过第一个item,也不会生效,内容显示只会被限定在第一个的宽高范围内. 原理也很好理解,后续item没有绘制出来时, wrap_content 计算出来的结果,就是第
基于WPF实现一个简单的音频播放动画控件

目录 1.实现代码 2.效果预览 1.实现代码一.创建AnimationAudio.xaml代码如下 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
JQuery 实现的页面滚动时浮动窗口控件

1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置.同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了.有时候如果需要做个比较好用的导航条,使用这个控件挺不错的. 2. Code & Properties: 这个js文件是在jQuery和JQeury UI的核心上扩展的.所以使用它前你必须到JQuery的官网下载那两个js文件,jquery.js和ui.core.js. 整个javascript如
JS日期和时间选择控件升级版(自写)

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹
vue.js element-ui tree树形控件改iview的方法

element-ui组件的tree树形控件修改源码改为iview组件实现原理修改了element-ui源码,把源码里面的tree模块提取出来然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法最后修改element样式,改为iview风格,自己也添加了一些样式新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

基于jquery的9行js轻松实现tab控件示例

相关推荐

随机推荐