南京斯恩科设计工作室的服务：网站建设、网站制作、网站设计、网站推广、DIV+CSS、flash产品演示等服务。-singki.com

[代码]tab标签效果 4个方向的标签

Dec15

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  .tabT {width:400px;padding:0;margin:0px;background:#ddd url(http://www.bluekevin.com/demo/1.jpg) repeat-x bottom;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;width:400px;}
  .tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-top:1px solid red;padding:2px 20px;}

  .show,hidden{width:398px;margin-top:0px;border-right:1px solid red;border-bottom:1px solid red;border-left:1px solid red;border-top:0px solid #fff;text-align:left;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}
 //-->
 </script>
</head>

<body >
<div id="getId">
<div class="tabT">
  <ul class="tab">
     <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
     <li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
     <li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
     <li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
  </ul>
</div>
<div class="show" id="tabC1">
  <div class="con">
    1111111111111111111
  </div>
</div>
<div class="hidden" id="tabC2">
  <div class="con">
    2
  </div>
</div>
<div class="hidden" id="tabC3">
  <div class="con">
    3
  </div>
</div>
<div class="hidden" id="tabC4">
  <div class="con">
    4
  </div>
</div>
</div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  .tabT {position:relative;width:400px;padding:0;margin:0px;background:#ddd url(http://www.bluekevin.com/demo/1.jpg) repeat-x bottom;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;width:400px;}
  .tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-top:1px solid red;padding:2px 20px;}

  .show,hidden{width:398px;margin-top:0px;border-right:1px solid red;border-bottom:1px solid red;border-left:1px solid red;text-align:left;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
  .tabMore{position:absolute;right:10px;top:5px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}


 //-->
 </script>
</head>

<body >
<div id="getId">
<div class="tabT">
  <ul class="tab">
     <li id="tabId1" class="current" onmouseover="tab('tabId1','tabC1');">tab 1</li>
     <li id="tabId2" onmouseover="tab('tabId2','tabC2');">tab2</li>
     <li id="tabId3" onmouseover="tab('tabId3','tabC3');">tab3</li>
     <li id="tabId4" onmouseover="tab('tabId4','tabC4');">tab4</li>
  </ul>
  <span class="tabMore"><a href="">more</a></span>
</div>
<div class="show" id="tabC1">
  <div class="con">
    1111111111111111111
  </div>
</div>
<div class="hidden" id="tabC2">
  <div class="con">
    2
  </div>
</div>
<div class="hidden" id="tabC3">
  <div class="con">
    3
  </div>
</div>
<div class="hidden" id="tabC4">
  <div class="con">
    4
  </div>
</div>
</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  #getId{width:400px;}
  .tabT {width:100px;float:left;padding:0;margin:0px;background:url(1.jpg) repeat-y right;height:400px;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;}
  .tab li {display:block;height:18px;line-height:18px;padding:10px 2px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:0px solid red;border-left:1px solid red;border-top:1px solid red;border-bottom:1px solid red;padding:10px 2px;}

  .show,hidden{float:left;width:299px;margin-top:0px;border-style:solid;border-width:1px 1px 1px 0px;border-color:red;text-align:left;height:400px;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}
 //-->
 </script>
</head>

<body >
<div id="getId">
  <div class="tabT">
    <ul class="tab">
       <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
       <li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
       <li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
       <li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
    </ul>
  </div>
  <div class="show" id="tabC1">
    <div class="con">
      1111111111111111111
    </div>
  </div>
  <div class="hidden" id="tabC2">
    <div class="con">
      2
    </div>
  </div>
  <div class="hidden" id="tabC3">
    <div class="con">
      3
    </div>
  </div>
  <div class="hidden" id="tabC4">
    <div class="con">
      4
    </div>
  </div>
</div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  /*
  Author: Kevin Xiao
  Email: kevin_218@163.com
  Web:www.bluekevin.com
  Msn:xiao-kevin@hotmail.com
  */
  #getId{width:400px;}
  .tabT {width:100px;float:right;padding:0;margin:0px;background:url(1.jpg) repeat-y;height:400px;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;}
  .tab li {display:block;height:18px;line-height:18px;padding:10px 2px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:0px solid red;border-top:1px solid red;border-bottom:1px solid red;padding:10px 2px;}

  .show,hidden{float:left;width:299px;margin-top:0px;border-style:solid;border-width:1px 0px 1px 1px;border-color:red;text-align:left;height:400px;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}
 //-->
 </script>
</head>

<body >
<div id="getId">
  <div class="tabT">
    <ul class="tab">
       <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
       <li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
       <li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
       <li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
    </ul>
  </div>
  <div class="show" id="tabC1">
    <div class="con">
      1111111111111111111
    </div>
  </div>
  <div class="hidden" id="tabC2">
    <div class="con">
      2
    </div>
  </div>
  <div class="hidden" id="tabC3">
    <div class="con">
      3
    </div>
  </div>
  <div class="hidden" id="tabC4">
    <div class="con">
      4
    </div>
  </div>
</div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  .tabT {width:400px;padding:0;margin:0;background:#ddd url(1.jpg) repeat-x top;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;width:400px;}
  .tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-bottom:1px solid red;padding:2px 20px;}

  .show,hidden{width:398px;height:100px;margin:0;border-right:1px solid red;border-bottom:0px solid red;border-left:1px solid red;border-top:1px solid red;text-align:left;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}
 //-->
 </script>
</head>

<body >
<div id="getId">
  <div class="show" id="tabC1">
    <div class="con">
      1111111111111111111
    </div>
  </div>
  <div class="hidden" id="tabC2">
    <div class="con">
      2
    </div>
  </div>
  <div class="hidden" id="tabC3">
    <div class="con">
      3
    </div>
  </div>
  <div class="hidden" id="tabC4">
    <div class="con">
      4
    </div>
  </div>
  <div class="tabT">
    <ul class="tab">
       <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
       <li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
       <li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
       <li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
    </ul>
  </div>
</div>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="roots" content="" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>Demo</title>
 <link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="style/css/master.css" />
 <script src="style/js/common.js" type="text/javascript" language="javascript" ></script>
 <style type="text/css">
 /*
 Author: Kevin Xiao
 Email: kevin_218@163.com
 Web:www.bluekevin.com
 Msn:xiao-kevin@hotmail.com
 */
  body
  {
    padding:50px;margin:0;
    color:#666;
    font:12px arial,sans-serif;
  }
  .tabT {width:400px;padding:0;margin:0px;background:#ddd url(1.jpg) repeat-x bottom;}

  .tab ,.tab li{padding:0;margin:0;border:none}
  .tab{height:23px;display:block;width:400px;}
  .tab li {display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;}
  .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-top:1px solid red;padding:2px 20px;}

  .show,hidden{width:398px;margin-top:0px;border-right:1px solid red;border-bottom:1px solid red;border-left:1px solid red;border-top:0px solid #fff;text-align:left;}
  .hidden{display:none;}
  .show{display:block;}
  .con {padding:10px;}
 </style>
 <script type="text/javascript" language="javascript">
 <!--
function tab(tabId, tabC){
  var len =document.getElementById('getId').getElementsByTagName('li').length;
  for(i=1; i <= len; i++){
    if ("tabId"+i==tabId){
      document.getElementById(tabId).className="current";
    }else{
      document.getElementById("tabId"+i).className="";
    }
    if ("tabC"+i==tabC){
      document.getElementById(tabC).className="show";
    }else{
      document.getElementById("tabC"+i).className="hidden";
    }
  }
}
 //-->
 </script>
</head>

<body >
<div id="getId">
<div class="tabT">
  <ul class="tab">
     <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">tab 1</li>
     <li id="tabId2" onclick="tab('tabId2','tabC2');">tab2</li>
     <li id="tabId3" onclick="tab('tabId3','tabC3');">tab3</li>
     <li id="tabId4" onclick="tab('tabId4','tabC4');">tab4</li>
  </ul>
</div>
<div class="show" id="tabC1">
  <div class="con">
    1111111111111111111
  </div>
</div>
<div class="hidden" id="tabC2">
  <div class="con">
    2
  </div>
</div>
<div class="hidden" id="tabC3">
  <div class="con">
    3
  </div>
</div>
<div class="hidden" id="tabC4">
  <div class="con">
    4
  </div>
</div>
</div>
</body>

</html>

posted under 设计 | 代码

0 comments to

斯恩科设计工作室

[代码]tab标签效果 4个方向的标签

“[代码]tab标签效果 4个方向的标签 ”