css實現導航切換
效果圖:
**如下,複製即可使用:
doctype html
>
<
html
>
<
head
>
<
title
>css實現導航切換
title
>
<
style
type
="text/css"
>
.clothes*li
a.clearfix:after
ul li
aa:hover
style
>
head
>
<
body
>
<
div
class
="clothes"
>
<
ul class
="clearfix"
>
<
li style
="border-left:1px solid #ededed;"
><
a style
="border-left:1px solid #fff;"
href
="">大牌
a>
li>
<
li><
a href
="">**
a>
li>
<
li><
a href
="">**
a>
li>
<
li><
a href
="">鞋靴
a>
li>
<
li><
a href
="">箱包
a>
li>
<
li><
a href
="">內衣配飾
a>
li>
<
li><
a href
="">珠寶首飾
a>
li>
<
li><
a href
="">奢侈禮品
a>
li>
<
li style
="border-right:1px solid #ededed;"
><
a href
="">奢華腕表
a>
li>
ul>
div>
body
>
html
>
如有錯誤,歡迎聯絡我改正,非常感謝!!!
更多專業前端知識,請上
【猿2048】www.mk2048.com
CSS實現側邊欄導航
charset utf 8 title type text css 隱藏checked核取方塊 sidemenu sidemenu checked aside sidemenu checked wrap aside h2 控制側邊欄進出的按鈕 外部包裹 wrap 控制側邊欄進出的按鈕 內部文字樣式 ...
使用附加導航 affix 實現內容切換
doctype html html head title new document title meta charset utf 8 style a ul affix affix active a container container box container box.active style ...
使用JS實現導航切換時高亮顯示
index.html 內容 1.html 內容 效果圖 注意 1 location.href 用於獲取當前頁面的url 2 當前頁面應該儲存為index.html 3 indexof 用於檢索當前url中是否存在a中對應的href 4 每個html中都擁有相同的導航結構 5 eq index ind...