【免费】简单选项卡js和jquery制作方法分享资源-CSDN文库

需积分: 0 105 浏览量 2020-12-11 03:14:08 上传评论收藏 22KB PDF 举报

资源推荐

资源详情

资源评论

简单选项卡简单选项卡 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>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38501826

粉丝: 9
资源: 893

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip