今天突然心血来潮，想到一个很简单的方法即可达到的tab效果 其实逻辑很简单，但看到网上基本上没这样写的 不知道实际应用中是否会有问题呢，请大侠指教代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery简易选项卡</title> <style> *{ margin:0; padding:0;} body, ul, li { margin:0; padding:0; } body { font:12px/1.5 Tahoma; } #outer { width:450px; ...
本文实例讲述了javascript的tab切换原理与效果实现方法。分享给大家供大家参考。 具体实现方法如下：代码如下:<html> <head> <style type="text/css"> #container{border:solid 1px green;width:300px;height:300px;} li{float:left;margin-left:20px;} p{float:left;} #sports,#military,#bbs{display:none;} </style> <script type="text/javascript"> function tab(pid){ var ps = [news,sports,military,bbs]; for(var i=0,l...
一款仿淘宝TAB切换搜索框，想搜索哪方面的内容就切换到哪一个，感兴趣的朋友可以看看下面的代码<div class="search"> <div id="searchBox"> <ul class="tab-bar clearfix" id="tabBar"> <li class="current" tips="请输入产品名称">商品</li> <li class="tab-line"><span>|</span></li> <li tips="请输入店铺名称">店铺</li> </ul> <div class="tab-box clearfix" id="tabBox"> <form onsubmit="" action="" method="get" name="se...
大致效果如图下面是代码：自己导入jQuery包。 样式：<style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;} #title li{float:left;list-style:none;width:50px;border-top:2px solid #f60;border-right:1px solid #ccc;text-align:center; padding-top:3px;}...
最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据，使用的都是小键盘区，在以前都是通过excel录入数据的现在， 在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用，也有人提供了这方面的思路如何来做， 经过本人的整理和测试，能够很好的解决这个问题： 需要的条件 1，Jquery库地址可以到jquery.com官网上去下载最新的 2，查看界面表单的结构和相对应的表单位置 以下是一些才是...
jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写： HTML代码： 代码如下:<div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3> </div> <div id="tab-content"> <ul><li>1234567890-1</li></ul> <ul class="hide"><li>1234567890-2</li></ul> <ul class="hide"><li>1234567890-3</li></ul> </div> </div> css代码： 代...
在网上找了很多jquery效果，都是这样的，于是自己写了一个。防止页面刷新的tab切换， html代码: 代码如下:<!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> <link href="../Style/admin.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="System/...
由于近来学了点js，于是我装逼道。。。不太难吧。。。就切一下display属性？同学无视我。。说要搞个通用的。。。什么还要跟ajax交互。。？？？我愣是没有听懂。。。到底要搞什么。。。权当作练手，我自己胡弄了一个。 需求：同学口中的通用我不知道神马意思。。。那我就按自己的理解吧。。 ①跨浏览器，IE6+，FF，Chrome，Safari，Opera ②同一个页面可以用同一个js设置不同的选项卡。 说太多没啥米用，来...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="http://demo.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <style> <!-- body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } .accordion { width: 480px; border-bottom: solid 1px...
支持自动播放 可定义鼠标事件延迟 不限制html结构 假设HTML如下： 代码如下: <ul> <li id="t1">tab1</li> <li id="t2">tab2</li> <li id="t3">tab3</li> </ul> <div id="c1">content1</div> <div id="c2">content2</div> <div id="c3">content3</div> 执行定义的tab初始化函数 代码如下:<script> var tabType={ trigger:触发事件, tabCurrentClass:当前tab的className [,delay:事件触发的延时, auto:是否自动播放, timer:自动播...
Tab切换应该不依赖于HTML结构，能给设计人员和前端开发最大的灵活性。原理：一个tab对象分为控制部分(trigger)，内容部分(sheet)。当trigger被触发时，显示对应的sheet。 以前大树写过一个TabControl的代码，经过两年的使用依旧很考谱，说明当初这个思路还是比较符合实际需求的。我改成了基于YUI的版本，可能看起来更清晰一些。先访问测试页面查看效果，完整javascript代码在这里。 注意：改成实际代码时，请将Tab类放在某个命名空...
html代码: 代码如下:<div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul> <dl id="a1">11111111111111111111111111111111 </dl> <dl id="a2" style="display:none"> 22222222222222222222222222222222222 </dl> <dl id="a3" style="display:none">3333333333333333333333333333333333333 </dl> </div> js代码:...
div+css+js模拟tab, 我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS 当然,你得会DIV才行. div+css+js模拟tab 框1111 框2222 框3333 框4444 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒．111．． 这里是内容撒222．． 这里是内容撒．222．． 这里是内容撒．222．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．333．． 这里是内容撒．444．． 这里是内容撒．...
简洁Tab 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了 做个滑动门,需要一个图片 CSS 代码如下:.nav{position:relative} .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2} .nav dt a{color:#555; text-decoration:none} .nav dt a:hover{color:#000} .nav dt a{ float:left; display:block; heig...