评论走起

常见tab切换样式,兼容IE6-随笔

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>常见tab切换兼容IE6</title>
<style>
 .wrap_tab{border:1px solid #cbcbcb; width:450px; overflow:hidden}
 .tab_ul{border-bottom:1px solid #cbcbcb; margin:0; padding:0; height:30px;
 background: rgb(249,249,249); / Old browsers /
 background: -moz-linear-gradient(top, rgba(249,249,249,1) 0%, rgba(236,236,236,1) 100%); / FF3.6+ /
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(236,236,236,1))); / Chrome,Safari4+ /
 background: -webkit-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); / Chrome10+,Safari5.1+ /
 background: -o-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); / Opera 11.10+ /
 background: -ms-linear-gradient(top, rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); / IE10+ /
 background: linear-gradient(to bottom, rgba(249,249,249,1) 0%,rgba(236,236,236,1) 100%); / W3C /
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ececec',GradientType=0 ); / IE6-9 /}
 .tab_ul li{float: left;display:inline; width:85px;border-right: 1px solid #D8D9D9;}
 .tab_ul li a{
  color:#666;
  text-decoration:none;
  display: block;
  float: left;
  height: 21px;
  padding-top: 8px;
  text-align: center;
  width: 85px;
  font-size:12px;
  border-bottom:1px solid #fff;
 }
 .tab_ul li a.active{ background:#fff; height: 22px; padding-top: 6px; border-top:2px solid #458FCE; _position:relative; _top:1px; _margin-top:-1px;}
 .tab_content div{ display:none; padding:10px}
</style>
</head>

<body>
<div class="wrap_tab">
 <ul class="tab_ul">
     <li><a href="#" class="active">选项1</li>
        <li><a href="#">选项2</li>
        <li><a href="#">选项3</li>
    </ul>
    <div class="tab_content">
     <div style="display:block">选项1内容</div>
        <div>选项2内容</div>
        <div>选项3内容</div>
    </div>
</div>   
    <!-- javascript -->
    <script src="   " target="_blank">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
; <script>
  $(function(){
   $("ul.tab_ul li a").click(function(){
    var $index = $("ul.tab_ul li a").index(this);
    $(this).addClass("active").closest("li").siblings().find("a").removeClass("active");
    $("div.tab_content > div").eq($index).show().siblings().hide();
   })
  })
 </script>
</body>
</html>

http://www.w3cfuns.com/data/attachment/album/201209/03/175309nq4opn8oh9hvpqqc.png"; target="_blank" target="_blank">

" target="_blank">http://www.w3cfuns.com/data/attachment/album/201209/03/175309nq4opn8oh9hvpqqc.png">

;


打赏
评论