Javascript 选项卡

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<title></title>

<style type="text/css">

#div1 .active

{

background: yellow;

}

#div1 div

{

width: 200px;

height: 200px;

background:
#808080;

border: 1px solid
#f00;

display: none;

}

</style>

<script type="text/javascript">

window.onload = function
() {

var
oDiv = document.getElementById("div1");

var
aBtn = oDiv.getElementsByTagName("input");

var
aDiv = oDiv.getElementsByTagName("div");

for
(var
i = 0; i < aBtn.length; i++) {

//给每一个按钮增加一个Index属性

aBtn[i].index = i;

//给按钮增加事件

aBtn[i].onclick = function
() {

//先把所有的btn的class改成无

for
(var
j = 0; j < aBtn.length; j++) {

aBtn[j].className = ‘‘;

aDiv[i].style.display = ‘none‘;

}

//当前点击的按钮是this

this.className = "active";

alert(this.index);

//aDiv[this.index].style.display = ‘block‘;

}

</script>

</head>

<body>

<div id="div1">

<input type="button"
class="active"
value="教育"
/>

<input type="button"
value="培训"
/>

<input type="button"
value="招生"
/>

<input type="button"
value="出国"
/>

<div style="display: block">11111111</div>

<div>22222222</div>

<div>33333333</div>

<div>44444444</div>

</div>

</body>

</html>

时间： 2024-12-28 14:56:42

Javascript 选项卡的相关文章

WEB前端开发学习----12. JavaScript 选项卡效果

选项卡无处不在,记录一个简单的JS实现方法, 仿网易效果. 当两个边框紧挨时,会变粗, 颜色也会变深,解决办法就是: margin-left:-1px, 按需修改top,left,right,bottom. [html] view plaincopy <!doctype html> <html> <head> <meta charset="utf-8"/> </head> <style type="text/c

JavaScript选项卡

实现js选项卡 html的代码如下: <div class="tabdiv"> <ul class="tabs" id="oTab"> <li class="tabin1"><a href="#">房产</a></li> <li><a href="#">家居</a></li&

javascript选项卡切换样式

HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> <li style="width: 18px;"> </li> <li><a href="javascript:void(0);" onclick="searchPersonZi(this);" class=&q

JavaScript选项卡/页签/Tab的实现

选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分为一类,用户更好理解.Tab的应用可以缩短页面屏长,降低信息的显示密度,同时又不牺牲信息量.在这种趋势下,Tab这种交互元素成为了一个越来越普遍的应用. Web里Tab可能最早2005年是amazon.com的首页引入的,如今各大门户,电商及各色网站的首页都采用了Tab表现形式.当前Sina和网易首

原生javascript 选项卡封装

window.onload=function(){ var aBtn=document.getElementsByTagName('input'); var aDiv=document.getElementsByTagName('div'); function tab(btn,content) { for(var i=0; i<btn.length; i++) { (function(index) { btn[index].onclick=function() { for(var i=0; i<

js制作一个简单的选项卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的选项卡</title> <style type="text/css"> #main{ height: 400px; width: 400px; margin: 20px auto; } #main>div{ height: 300px; width: 3

js学习总结----经典小案例之选项卡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,ul,li{ margin:0; padding: 0; font-family: Arial; font-size:12px; } ul li{ list-style:none

使用jQuery开发accordion手风琴插件

一.插件效果手风琴插件常用的功能均已实现,包括:手风琴菜单项的折叠展开效果.选中指定菜单项.判断菜单项是否选中等. 效果如下: 二.插件内部HTML元素结构 1  2 <ul class="accordion"> 3 <li accordion-id="menu1" class="active">插件使用</li> 4 <li> 5 <u

JavaScript学习笔记（二）——选项卡小结

Js制作选项卡小结 1.先构思好需要展示的页面效果,比如这样 2.需要显示的效果通过html和css制作出来,包括选项(第一课.第二课)的鼠标停留背景变色.下方选项页内容切换的内容等. 3.把此选项卡分为上下两个部分,并且3个选项对应3个选项页面.上方为id为tab的固定div,需要变换的是鼠标放入li时li切换背景(比如此时li为灰色背景):下方为content容器div,放入需要展示的内容(本例中为3个ul),初始效果为第一个ul显示block,后面两个为display:none. 4.将需