بالتأكيد، يمكنك تحقيق هذا الهدف بواسطة HTML و CSS، وربما القليل من الجافا سكريبت. لكن دعني أوضح لك الأمور بشكل أكبر.
أولاً، يمكنك استخدام الصفات (Attributes) في HTML لتحقيق هذا الهدف. على سبيل المثال، يمكنك استخدام صفة مخصصة مثل “toggle” وتعيين قيمتها إما “true” أو “false”، ثم استخدام CSS لتنسيق العناصر بناءً على قيمة هذه الصفة.
على سبيل المثال، يمكنك استخدام الكود التالي:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle HTML Tagstitle>
<style>
.toggle[active="true"] {
display: block;
}
.toggle[active="false"] {
display: none;
}
style>
head>
<body>
<p>
<label for="toggleCheckbox">Toggle Tags:label>
<input type="checkbox" id="toggleCheckbox" onchange="toggleTags(this)">
p>
<div class="toggle" active="true">
<p>This paragraph is visible by default.p>
div>
<div class="toggle" active="false">
<p>This paragraph is hidden by default.p>
div>
<script>
function toggleTags(checkbox) {
var toggles = document.querySelectorAll('.toggle');
for (var i = 0; i < toggles.length; i++) {
toggles[i].setAttribute('active', checkbox.checked);
}
}
script>
body>
html>
في هذا المثال، لدينا عنصر div يحتوي على فئة toggle ويحمل صفة active، يتم تغيير قيمة هذه الصفة بناءً على قيمة المربع النصي checkbox. إذا كان المربع محددًا (أي true)، فسيتم عرض العناصر، وإذا كان غير محدد، سيتم إخفاؤها.
هذه هي طريقة بسيطة لتحقيق ما تبحث عنه، ويمكنك توسيعها بمزيد من الأفكار والتخصيصات وفقًا لاحتياجاتك المحددة.
المزيد من المعلومات
بالطبع، هناك العديد من الطرق التي يمكنك استخدامها لتحقيق هذا الهدف بشكل أكثر تعقيدًا وتخصيصًا، والتي تشمل استخدام الجافا سكريبت للتفاعل مع العناصر HTML بشكل ديناميكي.
على سبيل المثال، يمكنك استخدام الجافا سكريبت لتغيير وضعية العناصر بناءً على حدث معين، مثل النقر على زر، بدلاً من استخدام عناصر الإدخال مثل المربعات النصية.
هذا مثال بسيط يوضح كيفية تبديل وضعية العناصر باستخدام الجافا سكريبت:
htmlhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle HTML Tagstitle>
<style>
.hidden {
display: none;
}
style>
head>
<body>
<p id="paragraph1" class="visible">This paragraph is visible by default.p>
<p id="paragraph2" class="hidden">This paragraph is hidden by default.p>
<button onclick="toggleParagraphs()">Toggle Paragraphsbutton>
<script>
function toggleParagraphs() {
var paragraph1 = document.getElementById('paragraph1');
var paragraph2 = document.getElementById('paragraph2');
if (paragraph1.classList.contains('visible')) {
paragraph1.classList.remove('visible');
paragraph1.classList.add('hidden');
paragraph2.classList.remove('hidden');
paragraph2.classList.add('visible');
} else {
paragraph1.classList.remove('hidden');
paragraph1.classList.add('visible');
paragraph2.classList.remove('visible');
paragraph2.classList.add('hidden');
}
}
script>
body>
html>
في هذا المثال، عند النقر على الزر “Toggle Paragraphs”، يتم تبديل وضعية الفقرتين بين العرض والإخفاء باستخدام الجافا سكريبت.
باستخدام الجافا سكريبت، يمكنك القيام بأشياء أكثر تعقيدًا مثل تغيير نمط CSS، أو إضافة وإزالة العناصر تمامًا من الصفحة بناءً على متغيرات الحالة. هذا يمكن أن يوفر لك مرونة أكبر في تخصيص تجربة المستخدم وإضافة المزيد من الوظائف إلى قالب HTML الخاص بك.
