สลับสี LI และ CSS Styles สำหรับแม้แต่แปลกบัตรรายการ

ให้สีพื้นหลัง LI อื่นและรูปแบบ CSS อื่น ๆ ที่จะคู่หรือคี่รายการในรายการ UL หรือ OL HTML เรียนรู้วิธีการทำเช่นนี้มีหรือไม่มี jQuery

A+ A-

คุณต้องได้เห็นรายการ HTML ที่มีสลับสีสำหรับรายการที่มี นี่คือจะบอกว่ารายการเลขแม้จะมีลักษณะ CSS หนึ่งและรายการเลขคี่จะมีลักษณะ CSS อื่น

องค์ประกอบ HTML (แท็ก) OL, UL และ LI จะใช้ในการสร้างรายการบนหน้าเว็บ แท็กเหล่านี้จะค่อนข้างมีประโยชน์และใช้งานง่าย พวกเขายังมาพร้อมกับหลายตัวเลือกในการปรับรูปลักษณ์และฟังก์ชั่นของรายการสร้าง

เกี่ยวกับรายการดังกล่าวการทำงานอย่างใดอย่างหนึ่ง แต่ยังไม่สามารถใช้ได้ใน HTML หรือ CSS มาตรฐาน ในบางครั้งในรายการเหล่านี้เราต้องการที่จะเห็นความแตกต่างมากยิ่งและรายการแปลกสำหรับ scannability ที่ดีขึ้นและการอ่าน ความแตกต่างดังกล่าวจะประสบความสำเร็จโดยสีที่แตกต่างพื้นหลังตัวอักษรในรูปแบบที่แตกต่างกันขนาดตัวอักษรสีข้อความ ฯลฯ คุณสามารถนำความแตกต่างของภาพในรายการรายการแม้คี่โดยใช้วิธีใดวิธีหนึ่งดังต่อไปนี้

จัดแต่งทรงผมรายการอื่นใช้ jQuery

หากคุณกำลัง ใช้ jQuery ทำให้รายการอื่นมองที่แตกต่างกันเป็นเรื่องง่ายมาก นอกจากนี้ jQuery จะจัดการรูปแบบอื่นแม้ว่าคุณจะเพิ่มหรือลบรายการ ดังนั้นจึงเป็นวิธีการที่ต้องการโดยเฉพาะอย่างยิ่งสำหรับรายการแบบไดนามิก นี่คือรหัส jQuery ที่จะทำเคล็ดลับ:

<script>
$(document).ready(function(){
  $('#ID-OF-DIV ul li:nth-child(odd)').addClass('alternate');
});
</script>

ID-OF-DIV เป็น ID ของส่วน div ในรายการที่ได้รับการวาง

รหัสข้างต้น เดินผ่านทุกรายการรายการ และเพิ่มคลาส CSS ที่เรียกว่า "ทางเลือก" เพื่อรายการทุกคนที่มาในตำแหน่งที่แปลก คุณสามารถตั้งชื่อคลาส CSS นี้สิ่งที่คุณต้องการ (เพียงแค่เปลี่ยนชื่อในรหัสตาม)

นี่เป็นชั้นสลับตัวอย่าง นี้กำหนดสีพื้นหลังที่จะ #efefef

.alternate{
background:#efefef;
}

ได้อย่างมีประสิทธิภาพทุกรายการที่แปลกในรายการของคุณจะมีสีพื้นหลัง #efefef คุณสามารถกำหนดกฎรูปแบบอื่น ๆ เช่นตัวอักษรขนาด font-family, font-weight ฯลฯ ในคลาส CSS นี้ตามความต้องการของคุณ

สลับสีพื้นหลังสำหรับ HTML บัตรรายการ

สลับสีพื้นหลังสำหรับ HTML บัตรรายการ

จัดแต่งทรงผมโดยไม่ต้องสำรอง jQuery

ถ้าคุณไม่ได้ใช้หรือไม่ต้องการที่จะใช้ jQuery คุณจะได้ด้วยตนเองให้ระดับที่แตกต่างกันทุกคี่ (หรือแม้กระทั่ง) รายการ หากคุณจะเพิ่มหรือลบรายการใด ๆ -you'll มีการมอบหมายชั้นด้วยตนเอง นี่คือวิธีที่คุณสามารถทำมันได้

<ul>
	<li>Item 1</li>
	<li class="alternate">Item 2</li>
	<li>Item 3</li>
	<li class="alternate">Item 4</li>
	<li>Item 5</li>
</ul>

ในขณะที่คุณสามารถดูไม่เป็นวิธีที่ดีมากที่จะบรรลุเป้าหมายของเรา ดังนั้นเราขอแนะนำให้คุณใช้ jQuery และทำให้ชีวิตของคุณง่ายขึ้น! อันที่จริงคำขวัญของ jQuery คือ "เขียนน้อยทำมากขึ้น"!

Ads

หุ้น

ร้อนในสัปดาห์

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น