萬盛學電腦網 >> 腳本專題 >> javascript >> 介紹選項卡 js和jquery制作方法
介紹選項卡 js和jquery制作方法
這篇文章主要介紹了簡單選項卡 js和jquery制作方法,需要的朋友可以參考下
代碼如下: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript" src="jquery-1.8.2.js"></script> <script type="text/javascript"> $(function(){ $("#ul2 li").click(function(){ var num = $(this).index(); $("#con2 div").css("display","none"); $("#con2 div").eq(num).css("display","block") }) }) </script> <script type="text/javascript"> window.onload = function(){ var ss = document.getElementById("ul1").getElementsByTagName("li"); var pa = document.getElementById("con"); var div = pa.getElementsByTagName("div"); //alert(div.length) var ch; for(var i = 0;i < ss.length;i++){ ss[i].index = i; ss[i].onclick = function(){ ch = this.index; for(var j = 0; j<div.length; j++){ div[j].style.display = "none"; if(j == ch){ div[j].style.display = "block"; } } } } } </script> <style type="text/css"> li{ float:left; height:30px; width:100px; border:1px #036 solid; list-style:none; text-align:center} #con,#con2{ clear:both; border:1px #0CF solid; height:200px; width:200px; overflow:hidden} #con div,#con2 div{ height:200px; width:200px; display:none} </style> </head> <body> <!--js方法實現--> <ul id="ul1"> <li>標題一</li> <li>標題二</li> <li>標題三</li> </ul> <div id="con"> <div style="display:block">內容一</div> <div>內容二</div> <div>內容三</div> </div> <!--jquery方法實現--> <ul id="ul2"> <li>標題一</li> <li>標題二</li> <li>標題三</li> </ul> <div id="con2"> <div style="display:block">內容一</div> <div>內容二</div> <div>內容三</div> </div> </body> </html>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved