用javascript实现的不错的一款网页选项卡

这款选项卡效果,是我见过的一个不错的选项卡效果,不是最好,也是很好的

Javascript 标签页(TAB)浏览控件推介之:DOMTab - javascript, DOMTab, TAB, 标签页,

/*
DOMtab Version 3.1415927
Updated March the First 2006
written by Christian Heilmann
check blog for updates: http://www.wait-till-i.com
free to use, not free to resell
*/
domtab={
tabClass:'domtab', // class to trigger tabbing
listClass:'domtabs', // class of the menus
activeClass:'active', // class of current link
contentElements:'div', // elements to loop through
backToLinks:/#top/, // pattern to check "back to top" links
printID:'domtabprintview', // id of the print all link
showAllLinkText:'show all content', // text for the print all link
prevNextIndicator:'doprevnext', // class to trigger prev and next links
prevNextClass:'prevnext', // class of the prev and next list
prevLabel:'previous', // HTML content of the prev link
nextLabel:'next', // HTML content of the next link
prevClass:'prev', // class for the prev link
nextClass:'next', // class for the next link
init:function(){
var temp;
if(!document.getElementById || !document.createTextNode){return;}
var tempelm=document.getElementsByTagName('div');
for(var i=0;i

  • PHP/MySQL
  • (X)HTML/CSS
  • Javascript
  • Ajax

Homr.cn - DIV+CSS小段精华代码

PHP

PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web 开发。

MySQL

MySQL是最流行的开放源码SQL数据库管理系统,它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司,结合了开放源码价值取向、方法和成功的商业模型。

back to menu

(X)HTML

HTML语言是我们建立网页的工具,从它出现发展到现在,规范不断完善,功能越来越强。但是依然有缺陷和不足,人们仍在不断的改进它,使它更加便于控制和有弹性,以适应网络上日新月异的应用需求。2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。

XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。

CSS

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

back to menu

Javascript

JavaScript 是一种新的描述语言,此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如: form 的输入) 而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端 (server)处理,再传回来的过程,而直接可以被客户端 (client) 的应用程式所处理。

back to menu

Ajax

AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词,但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略,在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。

这两个 JavaScript 功能 是:

  • 在不重新读取页面的情况下对伺服器送出要求(request)
  • 解析、使用 XML 文件

back to menu

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js选项卡的实现方法

    本文实例讲述了js选项卡的实现方法.分享给大家供大家参考.具体分析如下: 一.思路 1. 获取元素: 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件: 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none. 4. 点击当前按钮添加样式,把当前div显示出来,display设置为block. 二.html代码: <div id="div1"> <inpu

  • jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例

    -1.右侧弹出导航菜单完整代码 复制代码 代码如下: <!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> <met

  • JQuery 选项卡效果(JS与HTML的分离)

    在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&

  • js实现tab选项卡函数代码

    * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

  • 一个js封装的不错的选项卡效果代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>我们 选项卡效果 www.jb51.net</titl

  • js/jQuery简单实现选项卡功能

    第一种方法是用原生的js代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>简单选项卡</title>    <style type="text/css">    body,ul,li{margin:0;padding:0;}    body{font:12px/1.5 Ta

  • js tab 选项卡

    一般需要事先写好css样式等function tab(sId) { var tabs = document.getElementsByTagName("H2"); var boxs = document.getElementsByTagName("h3"); if ( boxs[sId].style.display=="block"){ boxs[sId].style.display="none"; tabs[sId].sty

  • 基于javascript实现最简单选项卡切换

    本文教大家用原生js实现的最简单选项卡切换效果,鼠标滑过,对应的隐藏部分显示,并且样式发生改变. 代码最简洁,js行为优化版,复制粘贴即可使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript-实现最简易选项卡</title> <style> body,ul,li{mar

  • js实现简单的可切换选项卡效果

    本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

  • javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

随机推荐