網站導航欄如何實現動態效果
Html代碼：<html>
<head>
<title>導航演示</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<div class="nav">
<a href="">欄目2</a>
<a href="">欄目3</a>
<a href="">欄目4</a>
<a href="">欄目5</a>
<a href="">欄目6</a>
</div>
</body>
</html>
CSS代碼：（nav.css）
.nav {
width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
z-index: 9;
}
.nav > a {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #333;
padding: 0 20px;
font-size: 16px;
text-decoration:none;
}
接下來進入正題
第一步：引入jquery.min.js
第二部：添加js代碼（nav.js）
$(function(){
$(".nav>a").each(function(){
$(this).css({"color":"red","border-bottom":"2px solid red"})
}).mouseout(function(){
$(this).css({"color":"#333","border-bottom":"2px solid white"})
})
})
})
function中的第一行.nav>a是根據css選擇器寫出來的
each會選擇特定的符合條件的標簽
進行以上兩步驟操作以後，最終html代碼如下：（index.html）
<html>
<head>
<title>導航演示</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="nav.css">
<script src="jquery.min.js"></script>
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<a href="">欄目1</a>
<a href="">欄目2</a>
<a href="">欄目3</a>
<a href="">欄目4</a>
<a href="">欄目5</a>
<a href="">欄目6</a>
</div>
</body>
</html>
把index.html ， jquery.min.js ，nav.js ，nav.css四個文件放到同一個目錄下，運行index.html再試試看，有沒有效果，是不是很棒!
這裏還需要跟大家說的是，單獨演示不會出現問題，但是如果放在網頁中，在出現動效的同時會有輕微的位置偏移，這是因為border-bottom出現和消失導致的，解決方法就是在.nav>a樣式表中再添加一行border-bottom: 2px solid white。即可解決。如果大家還存在有疑問的地方可以留言，我們可以共同學習進步。
本文由專業的鄭州app開發公司燚軒科技整理發布，原創內容不易，如需轉載，請註明出處!
網站導航欄如何實現動態效果