做项目的时候 要用到选项卡 但是突然忘记怎么做了 笔记也丢了 学了另一种方法 现在找回了 两种方法都在这里记一下 以免 再次丢失
第一种 笔记里的方法：
<!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>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#fenlei{ 500px; height:35px;}
.xiang{ float:left; 100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
.xiang:hover{ cursor:pointer}
.xuanxiang{ 500px; height:300px; display:none}
#guonei{ background-color:#AAAAFF; display:block}
#guoji{ background-color:#4DFFFF;}
#tiyu{ background-color:#d3a4ff;}
#yule{ background-color:#FFFFB9;}
</style>
</head>
<body>
<br />
<div id="fenlei">
<div class="xiang" style="background-color:#AAAAFF" onclick="showa('guonei')">国内新闻</div>
<div class="xiang" style="background-color:#4DFFFF" onclick="showa('guoji')">国际新闻</div>
<div class="xiang" style="background-color:#d3a4ff" onclick="showa('tiyu')">体育新闻</div>
<div class="xiang" style="background-color:#FFFFB9" onclick="showa('yule')">娱乐新闻</div>
</div>
<div id="guonei" class="xuanxiang">
</div>
<div id="guoji" class="xuanxiang">
</div>
<div id="tiyu" class="xuanxiang">
</div>
<div id="yule" class="xuanxiang">
</div>
<script type="text/javascript">
function showa(d)
{
var div = document.getElementById(d);
var suoyou = document.getElementsByClassName("xuanxiang");
for(var i=0;i<suoyou.length;i++)
{
suoyou[i].style.display = "none";
}
div.style.display = "block";
}
</script>
效果如图：
第二种方法 网上找到的：
<!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 src="dist/js/jquery-1.11.2.min.js"></script>
<style type="text/css">
div{margin:0;padding:0;500px;height:300px;display:none;}
.tab{margin:0;padding:0;list-style:none;500px;overflow:hidden;}
.tab li{float:left;100px;height:30px;text-align:center;line-height:30px;cursor:pointer; border-top-right-radius:10px 10px; border-top-left-radius:10px 10px; }
#on{display:block;}
.tab li.cur{background:blue;}
</style>
</head>
<body>
<ul class="tab">
<li style="background-color:#AAAAFF;">选项卡 1 </li>
<li style="background-color:#4DFFFF;" class="cur">选项卡 2 </li>
<li style="background-color:#FFFFB9;">选项卡 3 </li>
</ul>
<div style="background-color:#AAAAFF;"></div>
<div style="background-color:#4DFFFF;" id="on"></div>
<div style="background-color:#FFFFB9;" ></div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".tab li").click(function(){
$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$("div").hide().eq($(this).index()).show();
});
});
</script>
</html>
效果如图：
