这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现的 tab 标签切换效果,功能非常简单,实现了点击切换的效果,推荐给大家,有需要的小伙伴可以参考下。
直接先来个真相吧:
【html 代码】
- <div id="menu">
- <!--tag标题-->
- <ul id="nav">
- <li>
- <a href="#" class="selected">
- tab1
- </a>
- </li>
- <li>
- <a href="#" class="">
- tab2
- </a>
- </li>
- <li>
- <a href="#" class="">
- tab3
- </a>
- </li>
- <div style="clear:both">
- </div>
- </ul>
- <!--二级菜单-->
- <div id="menu_con">
- <div class="tag" style="display:block">
- 这是TAB切换效果区域1
- </div>
- <div class="tag" style="display:none">
- 这是TAB切换效果区域2
- </div>
- <div class="tag" style="display:none">
- 这是TAB切换效果区域3
- </div>
- </div>
- </div>
【js】
- /**
- * tabs
- * @author 橡树小屋
- */
- var tabs = function() {
- function tag(name, elem) {
- return (elem || document).getElementsByTagName(name);
- }
- //获得相应ID的元素
- function id(name) {
- return document.getElementById(name);
- }
- function first(elem) {
- elem = elem.firstChild;
- return elem && elem.nodeType == 1 ? elem: next(elem);
- }
- function next(elem) {
- do {
- elem = elem.nextSibling;
- } while ( elem && elem . nodeType != 1 ) return elem;
- }
- return {
- set: function(elemId, tabId) {
- var elem = tag("li", id(elemId));
- var tabs = tag("div", id(tabId));
- var listNum = elem.length;
- var tabNum = tabs.length;
- for (var i = 0; i < listNum; i++) {
- elem[i].onclick = (function(i) {
- return function() {
- for (var j = 0; j < tabNum; j++) {
- if (i == j) {
- tabs[j].style.display = "block";
- //alert(elem[j].firstChild);
- elem[j].firstChild.className = "selected";
- } else {
- tabs[j].style.display = "none";
- elem[j].firstChild.className = "";
- }
- }
- }
- })(i)
- }
- }
- }
- } ();
- window.onload = function() {
- tabs.set("nav", "menu_con");
- }
【CSS】
- body {
- background: #FFF;
- }
- a {
- color: #585858
- }#menu {
- width: 360px;
- }
- /*-------------------nav样式----------------------*/
- #menu#nav {
- display: block;
- width: 100 % ;
- padding: 0;
- margin: 0;
- list - style: none;
- background: url(.. / images / bg.gif)
- }#menu#nav li {
- float: left;
- width: 120px;
- }#menu#nav li a {
- display: block;
- line - height: 27px;
- text - decoration: none;
- padding: 0 0 0 5px;
- text - align: center
- }
- /*-------------------列表标题样式----------------------*/
- #menu_con {
- width: 358px;
- height: 135px;
- border: 1px solid#BF9660;
- border - top: none
- }.selected {
- background: url(.. / images / tag_bg.gif);
- }.clear {
- clear: both
- }
调用方法:
tabs.set("nav","menu_con");
代码下载 点击这里
这个实例只是简单实现了点击切换的效果,还有许多功能可以添加,大家一起动手实践一下吧。
来源: http://www.phperz.com/article/17/0717/269362.html