超簡單點選li背景變色

阿新 • • 發佈：2019-01-20

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
	<style>
		*{margin: 0;padding: 0;}
		div{
			min-height: 700px;
		}
		.main{
			width: 80%;
			height: auto;
			min-height: 700px;
			margin: 0 auto;
		}
		.left,.right{
			border: 1px solid #bbbbbb;
		}
		.left{
			width: 15%;
			height: auto;
			float: left;
		}
		.right{
			width: 80%;
			height: auto;
			float: right;
		}
		ul{
			list-style: none;
			line-height: 50px;
		}
		.left ul li{
			border-bottom: 1px solid #bbbbbb;
			padding-left: 50px;
		}
		.right ul{
			padding: 10px 40px;
		}
		.right ul li{
			border-bottom: 1px dashed #bfbfbf;
		}
		.active{
			background-color: #00a0e9;
			color: #fff;
		}
		.right ul li span{
			float: right;
			padding-right: 10px;
		}
	</style>
</head>
<body>
<div class="main">
	<div class="left">
		<ul>
			<li class="active">政策動態</li>
			<li>協會動態</li>
			<li>訪談報告</li>
			<li>能源會議</li>
		</ul>
	</div>
	<div class="right">
		<ul>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
			<li>關於印發《政策性質的通知》<span>2018-08-23</span></li>
		</ul>
	</div>
</div>
<script>
	$(".left ul").on("click","li",function(){
		$(".left ul li").removeClass("active");
		$(this).addClass("active");
	});
</script>
</body>
</html>

實現原理就是點選修改li的class屬性，所以需要一個class（active）樣式

第一步：寫一個ul

第二步：新增js

第三步：新增樣式

第四步：效果圖

其他的樣式自己加就可以，點選就可變色，是不是特別簡單

超簡單點選li背景變色

<!DOCTYPE html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></scri

滑鼠經過超連結上，元素(li)背景變色的程式碼,同時文字顏色改變

效果如下圖：要實現這個效果。很簡單。定義CSS樣式： a:hover{ background:#f29901;} 這段程式碼的顯示效果如下圖顯然，這樣太醜了。只需要再加上一句 a:hover{ bac

jquery 動態點選li標籤切換背景顏色

廢話不多講老規矩先上圖看效果：<script type="text/javascript" src="/jquery/jquery.js"></script> 改為你本地專案的js路徑<!DOCTYPE html><html>

Android使用selector點選按鈕文字變色

需求：開發中按鈕按壓時字型顏色變為灰色鬆開後恢復實現：1.res下新建color資料夾（放drawable資料夾下也可），建立檔案btn_text_color.xml: <selector xmlns:android="http://schemas.android.com/a

Android開發：修改button的邊框和點選改變背景

本文內容講解如何修改button的邊框，點選button改變背景顏色開啟在res/values目錄下的color.xml檔案，新增程式碼：  <color name="green">#008000</color>

style物件的使用，當點選時背景顏色變為黃色

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport

筆試題 | 在ul中插入1000個li,點選li顯示li的序號

題幹如題目所示,在點選li顯示序號的過程中使用了閉包,此方法沒有考慮優化的問題,如果li增加頁面載入會很遲緩.我會後續進行修改. <ul class="campus-test"></ul> window.onload = function

JQ側邊欄的點選時背景圖片的改變

先上圖，使用就去製作類似的效果 html的結構 <div class="con-l-left-list"> <div class="item active"> <div class="message"> <div cla

案例:點選li標籤彈出對應的索引

需求:點選li標籤,彈出對應的索引先看效果: html結構: <ul id="ul1"> <li>我是li標籤1</li> <li>我是li標籤2</li> <li>

LiseView GirdView點選改變背景圖片或者背景色

1、宣告變數 private MyGridView gird_girdview; private int oldPosition = -1;//上一個位置初始化 2、得到控制元件 gird_girdv

table中點選某一行變色

效果圖: <html> <head>&nb

Android 按鈕點選切換背景，同時修改文字顏色

其實原理很簡單，用到的是selector，用來設定android：background和android：textcolor屬性，selector可以用來設定預設時候、點選時候的背景圖片和文字

不用selector實現button的簡單點選效果

一般我們給button或者imageview設定點選效果時，會使用一個xml的選擇器selector。但是整個應用下來會建立很多個xml，甚至很多圖片。一般我們要得點選效果只是讓透明度有些變化而已，那麼針對透明度變化自定義一個元件。 public cl

經典的js問題實現點選li能夠彈出當前li索引與innerHTML的函式

經典的js問題實現點選li能夠彈出當前li索引與innerHTML的函式點選其中一項需要alert出如下結果：按照我們平常的想法，程式碼應該是這樣寫的： var myul = document.getElementsByTagName("ul")[0];

ListView獲取item的焦點以及設定item點選的背景效果

<Button android:id="@+id/muisc_download_btn" android:layout_width="30dp" android:layout_height="30dp" android:backgroun

利用事件委託實現點選li列表

我理解的事件委託就是事件冒泡加事件源，給父類元素繫結事件，來監聽子元素的冒泡事件，並找到是哪個子元素(事件源)的事件點選事件繫結在ul上var uls=document.getElementsByTagName('ul')[0];uls.addEven

設定TextView等View元件點選效果。點選修改背景。字型顏色等

Android TextView等預設是不帶點選效果的。。有的時候為了給使用者一個提示。可能需要我們自己新增點選效果。很多APP都是這樣實現的。下面上一張圖看看效果。下面是程式碼。 <TextView android:id="@+id/tv" android

jQuery UI table tr 點選事件背景藍色

jQuery UI 中的table，每個 tr 有單機事件，當點選某一個 tr 後，被點選 tr 背景色變藍，其他 tr 無背景色。 <table id="xxxGrid"></table> 遇到的問題：使用 js 或者 jQuery 動態新增的

AutoCompleteTextView修改下拉列表樣式去點選時背景

AutoCompleteTextView是Android提供的一個輸入自動匹配文字輸入工具，使用這個控制元件可以讓開發人員快速的完成輸入的資訊匹配，例如匹配搜尋歷史和搜尋模糊匹配等等然而這個控制元件在我們使用的的時候比較尷尬的地方是它的樣式實在不怎麼樣，所以當我們修改的時

jquery實現點選步驟條變色，以及點選下一步變色

最近做專案需要用到步驟條，看了很多不是自己想要的，就借鑑了一下別人的，然後自己總結了一下，感覺可以用到很多專案上使用了。下面是同種風格的步驟條，兩種變色方案： 1.先引入jquery的js <script src="jquery.min.js" type="

超簡單點選li背景變色

相關推薦