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