Heim > Web-Frontend > CSS-Tutorial > Handgeschriebenes CSS+JS zum Implementieren von Optionsfeldern

Handgeschriebenes CSS+JS zum Implementieren von Optionsfeldern

青灯夜游
Freigeben: 2018-10-10 15:42:52
nach vorne
3357 Leute haben es durchsucht

Dieser Artikel stellt handgeschriebene CSS+JS zur Implementierung von Optionsfeldern vor. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.

Manchmal müssen wir schönere Optionsfelder verwenden, dann müssen wir das Original aufgeben und es so schreiben:

<p class="radio"><span class="yuan rdactive"><span></span></span>你丑你先</p>
	<p class="radio"><span class="yuan"><span></span></span>你才丑你先</p>
<p class="radio"><span class="yuan"><span></span></span>你更丑你先</p>
Nach dem Login kopieren
	.radio{
		display: flex;
		align-items: center;
		width: 100px;
		cursor: pointer;
	}
	.yuan{/*大圈*/
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #ececec;/*这里写自己喜欢的颜色*/
		display: flex;
		align-items: center;
		margin-right: 5px;
	}
	.radio>span.rdactive{
		background: #EF6121;/*这里写自己喜欢的颜色*/
	}
	.yuan span{/*小圈*/
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: white;/*这里写自己喜欢的颜色*/
		margin: 0 auto;
	} 
Nach dem Login kopieren
$(".radio").children(&#39;.yuan&#39;).on(&#39;click&#39;,function(){
	$(&#39;.rdactive&#39;).removeClass(&#39;rdactive&#39;);
	$(this).addClass("rdactive").siblings().removeClass("rdactive");
})
Nach dem Login kopieren

Rendering:

Handgeschriebenes CSS+JS zum Implementieren von Optionsfeldern

Okay, hier können Sie es erreichen. Ist es nicht ganz einfach? Sie können es selbst ausprobieren!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonHandgeschriebenes CSS+JS zum Implementieren von Optionsfeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage