उदाहरण
लिस्ट ग्रिड व्यू बनाने के लिए, निम्न कोड का उपयोग करें:
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* दो समान कॉलम बनाएं जो एक दूसरे के बगल में फ्लोट हों */ .column { float: left; width: 50%; padding: 10px; color: white; } /* कॉलम के बाद फ्लोट क्लियर करें */ .row:after { content: ""; display: table; clear: both; } /* बटन स्टाइल करें */ .btn { border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer; } .btn:hover { background-color: #ddd; } .btn.active { background-color: #666; color: white; } </style> </head> <body> <h1>List Grid view example</h1> <h2>Click on the below buttons to switch views</h2> <div id="btnContainer"> <button class="btn" onclick="listView()">List</button> <button class="btn active" onclick="gridView()">Grid</button> </div> <br /> <div class="row"> <div class="column" style="background-color:rgb(154, 9, 173);"> <h2>Column 1</h2> </div> <div class="column" style="background-color:rgb(113, 35, 216);"> <h2>Column 2</h2> </div> </div> <div class="row"> <div class="column" style="background-color:rgb(19, 143, 85);"> <h2>Column 3</h2> </div> <div class="column" style="background-color:rgb(207, 69, 27);"> <h2>Column 4</h2> </div> </div> <script> var elements = document.querySelectorAll(".column"); function listView() { Array.from(elements).forEach(item => { item.style.width = "100%"; }); Array.from(document.querySelectorAll(".btn")).forEach((item, index) => { if (index === 0) item.classList.add("active"); else item.classList.remove("active"); }); } function gridView() { Array.from(elements).forEach(item => { item.style.width = "50%"; }); Array.from(document.querySelectorAll(".btn")).forEach((item, index) => { if (index === 1) item.classList.add("active"); else item.classList.remove("active"); }); } </script> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
लिस्ट बटन पर क्लिक करने पर:
