生活随笔
收集整理的這篇文章主要介紹了
HTML简单的自定义属性制作tab切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天做淘寶頁面時候碰到一個tab切換 如下圖所示：
?
當我鼠標移到第一個tab時候 那個小三角形在第一個tab項里 移到第二個時候 就到了第二個里面? 這種效果 我這里用了個小技巧 就是在HTML中自定義屬性 以前也碰到過這種類似的? 所以今天也有必要分享下 當然我在測試時候 沒有把所有的背景圖片合并在一起? 這是為了測試而已 當然沒有合并圖片有幾個小缺點 第一當我鼠標一開始移上去的時候 有一點點抖動那種效果 如果不怎么仔細看 很難分辨出來，第二涉及到頁面的性能方面 我們都知道一張圖片發送一個請求 那么n張圖片發送n個請求，那么服務器的壓力增大了 同樣客戶端性能降低了 ，所以合并小背景圖是為了減少http請求數，提高網站的性能，但是我這里沒有用小背景圖片? 直接用個大點的 當作最外層ul的背景? 如果圖片合并后就可以解決一點點抖動問題? 我這是為了測試 當然這做頁面時候 我不建議用大背景圖（同時沒有合并）這種方式 廢話不多說 然后我在li里面自定義一個hoverclass屬性 目的是我鼠標移上去的時候 獲取li當前的屬性 同樣在樣式里面定義了各個背景圖片 然后再鼠標移上去的同時 讓最外層ul增加一個類 目的是替換最外面的背景！下面是代碼：
?
<!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>?body,div,ul,li{?margin:0;?padding:0;}?ul,li{?list-style:none;}?.list{?width:960px;?height:201px;?overflow:hidden;?margin:50px?auto?0;?background:#ccb081?url(icon1.jpg)?no-repeat;}?.list?li{?width:133px;?height:186px;?overflow:hidden;?float:left;?margin-left:3px;?display:inline;}?.list1{?background:url(icon1.jpg)?no-repeat;}?.list2{?background:url(icon2.jpg)?no-repeat;}?.list3{?background:url(icon3.jpg)?no-repeat;}?.list4{?background:url(icon4.jpg)?no-repeat;}?.list5{?background:url(icon5.jpg)?no-repeat;}?.list6{?background:url(icon6.jpg)?no-repeat;}?.list7{?background:url(icon7.jpg)?no-repeat;}?.content-all{?width:978px;?border:1px?solid?#333;?overflow:hidden;?margin:10px?auto?0;}?.hide{?display:none;}?</style>?<script?type="text/javascript"?src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>??</head>??<body>?????<ul?class="list">?????????<li?hoverclass="list1"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list2"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list3"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list4"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list5"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list6"><img??src="photo.jpg"/></li>?????????<li?hoverclass="list7"><img??src="photo.jpg"/></li>?????</ul>?????<div?class="content-all">?????????<div?class="content">1111</div>?????????<div?class="content?hide">2222</div>?????????<div?class="content?hide">33333</div>?????????<div?class="content?hide">44444</div>?????????<div?class="content?hide">55555</div>?????????<div?class="content?hide">666666</div>?????????<div?class="content?hide">77777</div>?????</div>?<script?type="text/javascript">??$(function(){?????$(".list?li").hover(function(){?????????var?r?=?$(this).attr("hoverclass");?????????$(".list").attr("className","list?"?+?r);??????????var?index?=?$(".list?li").index(this);?????????$(".content").eq(index).show().siblings().hide();????})??????})?</script>???</body>?</html>? ?
轉載于:https://blog.51cto.com/tugenhua/734226
總結
以上是生活随笔為你收集整理的HTML简单的自定义属性制作tab切换的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
