生活随笔
收集整理的這篇文章主要介紹了
HTML简单的自定义属性制作tab切换
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天做淘寶頁(yè)面時(shí)候碰到一個(gè)tab切換 如下圖所示：
?
當(dāng)我鼠標(biāo)移到第一個(gè)tab時(shí)候 那個(gè)小三角形在第一個(gè)tab項(xiàng)里 移到第二個(gè)時(shí)候 就到了第二個(gè)里面? 這種效果 我這里用了個(gè)小技巧 就是在HTML中自定義屬性 以前也碰到過(guò)這種類似的? 所以今天也有必要分享下 當(dāng)然我在測(cè)試時(shí)候 沒(méi)有把所有的背景圖片合并在一起? 這是為了測(cè)試而已 當(dāng)然沒(méi)有合并圖片有幾個(gè)小缺點(diǎn) 第一當(dāng)我鼠標(biāo)一開(kāi)始移上去的時(shí)候 有一點(diǎn)點(diǎn)抖動(dòng)那種效果 如果不怎么仔細(xì)看 很難分辨出來(lái)，第二涉及到頁(yè)面的性能方面 我們都知道一張圖片發(fā)送一個(gè)請(qǐng)求 那么n張圖片發(fā)送n個(gè)請(qǐng)求，那么服務(wù)器的壓力增大了 同樣客戶端性能降低了 ，所以合并小背景圖是為了減少http請(qǐng)求數(shù)，提高網(wǎng)站的性能，但是我這里沒(méi)有用小背景圖片? 直接用個(gè)大點(diǎn)的 當(dāng)作最外層ul的背景? 如果圖片合并后就可以解決一點(diǎn)點(diǎn)抖動(dòng)問(wèn)題? 我這是為了測(cè)試 當(dāng)然這做頁(yè)面時(shí)候 我不建議用大背景圖（同時(shí)沒(méi)有合并）這種方式 廢話不多說(shuō) 然后我在li里面自定義一個(gè)hoverclass屬性 目的是我鼠標(biāo)移上去的時(shí)候 獲取li當(dāng)前的屬性 同樣在樣式里面定義了各個(gè)背景圖片 然后再鼠標(biāo)移上去的同時(shí) 讓最外層ul增加一個(gè)類 目的是替換最外面的背景！下面是代碼：
?
<!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>無(wú)標(biāo)題文檔</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>? ?
轉(zhuǎn)載于:https://blog.51cto.com/tugenhua/734226
總結(jié)
以上是生活随笔為你收集整理的HTML简单的自定义属性制作tab切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
