选项卡

做项目的时候 要用到选项卡 但是突然忘记怎么做了 笔记也丢了 学了另一种方法 现在找回了 两种方法都在这里记一下 以免 再次丢失

 

第一种 笔记里的方法:

<!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{ width:500px; height:35px;}
.xiang{ float:left; width:100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
.xiang:hover{ cursor:pointer}
.xuanxiang{ width: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;width:500px;height:300px;display:none;}
.tab{margin:0;padding:0;list-style:none;width:500px;overflow:hidden;}
.tab li{float:left;width: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>

  效果如图:

 

posted @ 2017-02-09 21:43  心若微漪  阅读(123)  评论(0编辑  收藏  举报