簡單選項卡 js和jquery制作方法分享
更新時間：2014年02月26日 16:09:43 作者：
這篇文章主要介紹了簡單選項卡 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方法實現(xiàn)-->
<ul id="ul1">
<li>標題一</li>
<li>標題二</li>
<li>標題三</li>
</ul>
<div id="con">
<div style="display:block">內容一</div>
<div>內容二</div>
<div>內容三</div>
</div>
<!--jquery方法實現(xiàn)-->
<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>
相關文章
由于很多知識都已經(jīng)做了詳細介紹，本節(jié)只介紹需要修改的代碼，使用jqery封裝的ajax使用XML格式接收服務器端的數(shù)據(jù)，web.xml、后臺的servet都不用改2011-10-10
jQuery form插件之formDdata參數(shù)校驗表單及驗證后提交
Form Plugin API 里提供了很多有用的方法可以讓你輕松的處理表單里的數(shù)據(jù)和表單的提交過程,通過本文給大家介紹jQuery form插件之formDdata參數(shù)校驗表單及驗證后提交的相關知識，感興趣的朋友一起學習吧2016-01-01
這篇文章主要介紹了jquery實現(xiàn)背景墻聚光燈效果示例,需要的朋友可以參考下2014-03-03
Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多，由于實現(xiàn)起來比較麻煩，所以自己寫了一個，下面為大家分享下具體的算法及實現(xiàn)代碼，感興趣的朋友可以參考下2013-10-10
jQuery/JS監(jiān)聽input輸入框值變化實例
在本篇文章里小編給大家整理的是一篇關于jQuery/JS監(jiān)聽input輸入框值變化實例內容，需要的朋友們學習下。2019-10-10
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語法和獲取簡例，需要的朋友可以看下2016-11-11
關注jquery技巧提高jquery技能(前端開發(fā)必學)
本文給大家介紹jquery前端開發(fā)關注jquery技巧提高jquery技能，對jquery前端開發(fā)感興趣的朋友可以參考下本文2015-11-11
本篇文章主要是對JQUERY 設置SELECT選中項的代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
通過Jquery遍歷Json的兩種數(shù)據(jù)結構的實現(xiàn)代碼
在ajax交互中，我們從服務器端返回的數(shù)據(jù)類型有xml,html,script,json,jsonp,text，本文以json為例，講述了在前臺如何利用jquery遍歷json的兩種數(shù)據(jù)結構2011-01-01
jQuery AJAX 方法success()后臺傳來的4種數(shù)據(jù)詳解
今天小編就為大家分享一篇jQuery AJAX 方法success()后臺傳來的4種數(shù)據(jù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08