zoukankan      html  css  js  c++  java
  • 淘宝网宝贝描述页面的TAB选项卡

    代码简介:一个淘宝网的TAB选项卡,很圆滑,经典之作

    代码内容:

    <html>
    <head>
    <title>淘宝网宝贝描述页面的TAB选项卡_网页代码站(www.webdm.cn)</title>
    <style>
    body {font-size:12px;}
    ul.TabBarLevel1{
    	list-style:none;
    	margin:0;
    	padding:0;
    	height:29px;
    	background-image:url(http://www.webdm.cn/images/20090914/tabbar_level1_bk.gif);
    }
    ul.TabBarLevel1 li{
    	float:left;
    	padding:0;
    	height:29px;
    	margin-right:1px;
    	background:url(http://www.webdm.cn/images/20090914/tabbar_level1_slice_left_bk.gif) left top no-repeat;
    }
    ul.TabBarLevel1 li a{
    	display:block;
    	line-height:29px;
    	padding:0 20px;
    	color:#333;
    	background:url(http://www.webdm.cn/images/20090914/tabbar_level1_slice_right_bk.gif) right top no-repeat;
    	white-space: nowrap;
    }
    ul.TabBarLevel1 li.Selected{
    	background:url(http://www.webdm.cn/images/20090914/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
    }
    ul.TabBarLevel1 li.Selected a{
    	background:url(http://www.webdm.cn/images/20090914/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
    }
    
    ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
    	color:#333;
    }
    ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
    	color:#F30;
    	text-decoration:none;
    }
    ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
    	color:#000;
    }
    ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
    	color:#F30;
    	text-decoration:none;
    }
    div.HackBox {
      padding : 2px 2px ;
      border-left: 2px solid #6697CD;
      border-right: 2px solid #6697CD;
      border-bottom: 2px solid #6697CD;
    }
    
    </style>
    </head>
    <body>
    <div id="Whatever">
    	<ul class="TabBarLevel1" id="TabPage1">
    		<li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">宝贝详情</a></li>
    		<li  id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">其他信息</a></li>
    		<li  id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');">出价记录</a></li>
    		<li  id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">留言簿</a></li>
    	</ul>
    </div>
    <script language="JavaScript">
    
    function switchTab(tabpage,tabid){
            var oItem = document.getElementById(tabpage);   
    	for(var i=0;i<oItem.children.length;i++){
    		var x = oItem.children(i);	
    		x.className = "";
    		var y = x.getElementsByTagName('a');
    		y[0].style.color="#333333";
    	}	
    	document.getElementById(tabid).className = "Selected";
    }
    </script>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/6a2eeeaf-fbd5-4ee8-9101-ab1de2995fd3.html

  • 相关阅读:
    跨数据库操作
    Windows 服务
    Linq To DataTable
    嵌入式软件应用程序开发框架浅见
    31.获取当前系统时间
    30 System类
    29. StringBuilder
    28. string类中方法练习
    27 string类中常用的方法列表
    26.String类(1)
  • 原文地址:https://www.cnblogs.com/webdm/p/1957820.html
Copyright © 2011-2022 走看看