这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现简单的 tab 切换选项卡效果, 涉及 javascript 结合鼠标事件对页面元素属性动态操作的相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现简单的 tab 切换选项卡效果。分享给大家供大家参考,具体如下:
- <!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">
- <meta charset="UTF-8">
- <head>
- <title>
- JS自制简单使用的选项卡
- </title>
- <style type="text/CSS">
- *{ margin:0px; padding:0px;} #tabWarp{ width:400px; height:300px; border:1px
- solid #ccc; margin:10px auto;} #tabMenu{ width:400px; height:25px; overflow:hidden;
- border-bottom:1px solid #ccc; margin-top:5px;} #tabMenu ul li{ width:80px;
- float:left; list-style:none; font-size:12px; line-height:25px; height:25px;
- text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid
- #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px
- 5px;} #tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold;
- color:#FF6600;} #tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
- #tabContent .hide{ display:none;}
- </style>
- </head>
- <body>
- <h1 id="what">
- </h1>
- <div id="tabWarp">
- <div id="tabMenu">
- <ul>
- <li class="curent">
- 中餐
- </li>
- <li>
- 西餐
- </li>
- <li>
- 亚洲菜
- </li>
- <li>
- 河南菜
- </li>
- </ul>
- </div>
- <div id="tabContent">
- <div>
- <p>
- 中餐的内容
- </p>
- </div>
- <div class="hide">
- <p>
- 西餐的内容
- </p>
- </div>
- <div class="hide">
- <p>
- 亚洲菜的内容
- </p>
- </div>
- <div class="hide">
- <p>
- 河南菜的内容
- </p>
- </div>
- </div>
- </div>
- <script>
- function fgTab(tabNav, tabBody) {
- var tabMenu = document.getElementById(tabNav);
- var tabTitle = tabMenu.getElementsByTagName('li');
- var tabContent = document.getElementById(tabBody);
- var tabBody = tabContent.getElementsByTagName('div');
- function switchTab(i) {
- tabTitle[i].onmouseover = function() {
- for (j = 0; j < tabTitle.length; j++) {
- if (i == j) {
- tabTitle[j].className = 'curent';
- tabBody[j].style.display = "block";
- } else {
- tabTitle[j].className = '';
- tabBody[j].style.display = "none";
- }
- }
- //document.getElementById('what').innerHTML = i+'<br/>'+out();
- }
- }
- for (i = 0; i < tabTitle.length; i++) {
- switchTab(i);
- }
- }
- function out() {
- return i + '<br/>' + j;
- }
- </script>
- <script>
- fgTab('tabMenu', 'tabContent');
- </script>
- </body>
- </html>
运行效果图如下:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0707/331711.html