-
function $(id){
? ? return typeof id === 'string'?document.getElementById(id):id;
}
//給id單獨(dú)封裝一個(gè)函數(shù)，如果id為字符串的話，返回getElementById(id)否則返回id本身
//A=(B)?C:D上面是一般的形式，代表的含義是判斷B是否為真。 若為真，返回A=C;反之，A=D；問(wèn)號(hào)冒號(hào)語(yǔ)句一般是if語(yǔ)句的簡(jiǎn)潔寫(xiě)法
window.onload=function(){
var title = document.getElementById('menu').getElementsByTagName('p');
var list = document.getElementById('menu').getElementsByTagName('ul');
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái)
? ? ??
? ? ? if(title.length != list.length){
? ? ? ? ? return;
? ? ? }
? ? ? ? for(var i=0;i<title.length;i++){
? ? ? ? ? ? title[i].id = i;
? ? ? ? ? ? title[i].onclick = function(){
? ? ? ? ? ? ? ? for(var j=0; j<title.length; j++){
? ? ? ? ? ? ? ? ? ? list[j].style.display = "none";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.style.display = 'block';
? ? ? ? ? ? ? ? list[this.id].style.display = 'block';
? ? ? ? ? ? }
? ? ? ? }
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對(duì)應(yīng)的列表
? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)
}
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;
? ? ? ??
? ? }
.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}
.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}
.menu div ul{display:none;}
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){
? ? return typeof id==="string"?document.getElementById(id):id;
? ??
? ? }
window.onload=function(){
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái)
? ? ? var titles=$('menu').getElementsByTagName('p');
? ? ? var lists=$('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ?for(var i=0;i<titles.length;i++) {
? ? ? ? ?titles[i].id=i;
? ? ? ? ?titles[i].onclick=function() {
? ? ? ? ? ? ?for(var j=0;j<titles.length;j++) {
? ? ? ? ? ? ? ? ?lists[j].style.display='none'
? ? ? ? ? ? ?}
? ? ? ? ? ? ?lists[this.id].style.display='block'
? ? ? ? ?}
? ? ?}
? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對(duì)應(yīng)的列表
? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul >
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺(tái)腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
查看全部 -
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}
.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}
.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}
.menu div ul{display:none;}
/*.menu .active{
display: block;*/
}
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
// <script src="../resources/js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function $(id){
return typeof id==="string"?document.getElementById(id):id;
}
? window.onload=function(){
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái)
? ? ? var titles=$('menu').getElementsByTagName('p');
? ? ? var lists=$('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ? for (var i=0;i<titles.length;i++) {
? ? ? ?titles[i].id=i;
? ? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對(duì)應(yīng)的列表
? ? ? ?titles[i].onclick=function(){
? ? ? ?//console.log(this.id);?
? ? ? ?for (var j=0;j<titles.length;j++) {?
? ? ? ?//關(guān)閉
if(this.id!=j){
lists[j].style.display='none';
}else{
// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)
lists[this.id].style.display=lists[this.id].style.display=='block'?"none":"block";
}
}
? ? ? ?}
? ? ? }
}
/* $(function(){
$("p").click(function(){
? ? ? $(this).siblings().toggleClass("active").parent().siblings().find("ul").removeClass("active");
? ? ?});
})*/
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p class="menu-tit" id="menu-tit">Web前端</p>
<!--class="active"-->?
<ul >
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺(tái)腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
查看全部 -
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hidden {
display: none;
}
.show {
display: inline-block;
}
</style>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send');
var inside = document.getElementById('inside');
times=60,
timer=null;
send.onclick=function () {
//計(jì)時(shí)開(kāi)始即 禁用send
send.setAttribute("disabled",true);
function www(){
// 顯示inside?
inside.className =? "show";
times--;
if(times<0) {
? clearInterval(i);
??
? //計(jì)時(shí)結(jié)束即 重置啟用send，并隱藏inside
? send.disabled=false;
? times = 60;
? inside.className="hidden";
}
inside.value = times + "秒后重試";
}
var i = setInterval(www,1000); }
}
</script>
</head>
<body>
<input type="button" id="send" value="發(fā)送驗(yàn)證碼">
<input type="button" id="inside" class= "hidden" disabled="disabled" value="計(jì)時(shí)">
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}
.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}
.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}
/*
.menu div ul{display:none;}
*/
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
.active {
display: block;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript">
//window.onload=function(){
? ??
? ? ? // 將所有點(diǎn)擊的標(biāo)題和要顯示隱藏的列表取出來(lái)
? ??
? ? ?// 遍歷所有要點(diǎn)擊的標(biāo)題且給它們添加索引及綁定事件
? ? ?// 獲取點(diǎn)擊的標(biāo)題上的索引屬性，根據(jù)該索引找到對(duì)應(yīng)的列表
? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來(lái)
//}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p id ="p0">Web前端</p>
<ul id= "ul0" class="active">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p id ="p1">后臺(tái)腳本</p>
<ul id= "ul1" class="hidden">
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p id ="p2">前端框架</p>
<ul id= "ul2" class="hidden">
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
<script>
/*
String.prototype.myReplace=function(f,e){//吧f替換成e
? ? var reg=new RegExp(f,"g"); //創(chuàng)建正則RegExp對(duì)象? ?
? ? return this.replace(reg,e);?
}
var tit = document.getElementById("menu").childNodes[1].childNodes[3];
? ? var uls = document.getElementsByTagName("ul");
var sp = tit.innerHTML.split('<li>').toString().split('</li>');
//document.write(tit.length);
for(var i=0;i<tit.length;i++){
document.write(tit[i]+"<br>");}
document.write(sp.toString().myReplace(',',''));
*/
var menu = document.getElementById("menu");?
for(var i=0;i<menu.getElementsByTagName("p").length;i++)
!(window.onload = function(i) {
document.getElementById("p"+i).onclick = function() {
if(document.getElementById("ul"+ i).className === "hidden"){
for(var j=0;j<menu.getElementsByTagName("ul").length;j++)
document.getElementById("ul"+ j).className = "hidden";
document.getElementById("ul"+ i).className = "active";
alert("1");
}
else if(document.getElementById("ul"+ i).className === "active"){
document.getElementById("ul"+ i).className = "hidden";
alert("2");
}
else? alert("出現(xiàn)錯(cuò)誤！");
}
}(i));
/* var i=0;
document.write(document.getElementById("ul"+ i).className);*/
</script>
</body>
</html>
查看全部 -
自己根據(jù)1-4AMY老師的代碼例案。 第一次接觸js自己寫(xiě)的。如法炮制： <script?type="text/javascript"> ????function?$(id){ ????????return?typeof?id=='string'?document.getElementById(id):id; ????} ????window.onload=function()?{ ????????var?ps?=?$('menu').getElementsByTagName('p'); ????????var?uls?=?$('menu').getElementsByTagName('ul'); ????????for?(var?i?=?0;?i?<?uls.length;?i++)?{ ????????????ps[i].id?=?i; ????????????ps[i].onclick?=?function?()?{ ????????????????if(uls[this.id].style.display?==?'block') ????????????????return?uls[this.id].style.display?=?'none'; ????????????????else ????????????????return?uls[this.id].style.display?=?'block'; ????????????} ????????} ????} </script>查看全部 -
Tab切換類(lèi)型
查看全部
舉報(bào)