jquery導航選中按鈕顏色變化

時間 2019-11-12

原文原文鏈接

今天寫一個前端頁面的小功能，選中某個按鈕或者菜單的時候顏色發生變化，以便用戶區分本身選中的選項，這也是一種前端平常工做之中優化項。效果是這樣的： css

代碼是這樣的：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>              
        ul li{       
        	line-height: 40px;        	
            list-style: none;
            float: left;
            padding-left: 20px;
           
        }
        .click{
        	width: 100px;
        	height: 40px;
        	display: block;
        	text-align: center;
        	background: #1CAF9A;
            color: #FFFFFF; 
        }
        .noneclick {
        	width: 100px;
        	height: 40px;
        	display: block;
        	text-align: center;
            color: #000000;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li><span class="noneclick">報警配置</span></li>
    <li><span class="noneclick">地圖配置</span></li>
    <li><span class="noneclick">服務器配置</span></li>
    <li><span class="noneclick">圖標配置</span></li>													
	<li><span class="noneclick">崗位配置</span></li>												
</ul>
<script>
    $('#menu li span').click(function () {
        var f = this;
        $('#menu li span').each(function () {
            this.className = this == f ? 'click' : 'noneclick'
        });
    });
</script>
</body>
</html>
複製代碼

原文做者：祈澈姑娘 90後前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。前端

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。