मेरे पास एक पृष्ठ है जिसमें तीन divs हैं प्रत्येक div एक अनुच्छेद है। जब भी उपयोगकर्ता नेवबार से उस पर प्रेस करता है तो मैं केवल पृष्ठ में प्रत्येक div को दिखाने के लिए जावास्क्रिप्ट का उपयोग करना चाहता हूं यह नेवबार है
WebDev केवल एक पृष्ठ है जिसमें तीन अलग-अलग div शामिल हैं जैसा कि यहां दिखाया गया है
<!--HTML-->
<div class="html" id="html-show">
<p class="text-html" id="htmlContent">..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show">
<p class="text-css" id="cssContent">..
</p>
</div>
<!--JS-->
<div class="js" id="js-show">
<p class="text-js" id="jsContent">..
</p>
</div>
इसलिए, यदि उपयोगकर्ता नेवबार में एचटीएमएल पर प्रेस करता है तो उसे इस पेज पर रीडायरेक्ट किया जाएगा और केवल एचटीएमएल डिव दिखाई दे रहा है, वही सीएसएस और जेएस के लिए जाता है। वास्तव में, पृष्ठ के अन्य भाग दिखाए जाएंगे (नेवबार, पाद लेख, आदि..)
4 जवाब
इसके लिए आपको जेएस की भी आवश्यकता नहीं है। आप इसे केवल HTML और CSS के साथ एंकर और :target जैसे नीचे दिए गए स्निपेट में उपयोग कर सकते हैं।
#html-show, #css-show, #js-show {
display: none;
}
#html-show:target, #css-show:target, #js-show:target {
display: block;
}<!--Nav-Bar-->
<a href="#html-show">Show HTML</a>
<a href="#css-show">Show CSS</a>
<a href="#js-show">Show JS</a>
<!--HTML-->
<div class="html" id="html-show">
<p class="text-html" id="htmlContent">HTML Content..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show">
<p class="text-css" id="cssContent">CSS Content..
</p>
</div>
<!--JS-->
<div class="js" id="js-show">
<p class="text-js" id="jsContent">JS Content..
</p>
</div>मैं एक सीएसएस दृष्टिकोण लागू करूंगा। अपना पृष्ठ लोड करते समय, दस्तावेज़ के मुख्य भाग में कुछ विशिष्ट पहचानकर्ता वर्ग जोड़ें, और उसके आधार पर विभिन्न भागों की दृश्यता निर्धारित करें। साथ ही, अपने लिंक में क्वेरी परम जोड़ें। अब यदि आप पृष्ठ को index.html?show=html के साथ लोड करते हैं, तो केवल html div दिखाई देगा।
<html>
<head>
<script type="text/javascript">
//this is just for illustration purposes, use a parser library
function getParams () {
return document.location.search.substr(1).split("&").reduce(function (acc, p) {
const [key, value] = p.split("=");
if (typeof(value) !== "undefined") {
acc[key] = value;
}
return acc;
}, {});
}
document.addEventListener("load", function () {
const params = getParams();
body.classList.add("show-" + (params.show || "all"));
});
</script>
<style>
.html, .css, .js {
display: none;
}
body.show-all .html, body.show-all .css, body.show-all .js {
display: block;
}
body.show-html .html {
display: block;
}
</style>
</head>
<body>
...
</body>
</html>
इस तरह मैं इसे करूँगा (सादे जावास्क्रिप्ट में किसी विशिष्ट तत्व की दृश्यता सीएसएस संपत्ति को बदलना)।
// You would change the id to the id of the button element (so the links in your navbar)
var button = document.getElementById('button');
// This is the element that you either want to be hidden or shown
var elementToBeToggled = document.getElementById('elementToBeToggled');
// states whether or not the element is visible in this current state.
var elementVisible = "hidden";
// This function will be run when you click the link in the navbar
function toggleElement() {
// Ternary operation that basically changes elementVisible to its opposite
elementVisible = elementVisible === "hidden" ? elementVisible = "visible" : elementVisible = "hidden";
// change element visiblity to elementVisible variable
elementToBeToggled.style.visiblity = elementVisible;
}
// Run toggle function on button click
button.onclick = toggleElement;
यदि आप केवल <button> टैग के अंदर एक onclick ईवेंट डालते हैं तो यह समाधान बहुत अधिक लचीला है क्योंकि आप केवल उस एकल HTML टैग में onclick ईवेंट को छोड़ सकते हैं और यह होगा काम नहीं करता अगर मान लें कि टॉगल बटन एक <a> टैग था। नेवबार बनाने के लिए <a> टैग को स्टाइल करना बहुत आसान है, मुझे लगता है कि यह समाधान आपके लिए व्यवहार्य होगा।
<button onclick="showHtmlDiv()">Click Here</button>
<div id="html-show">
<p class="text-html" id="htmlContent">..
</p>
</div>
<script>
function showHtmlDiv() {
var htmlShow = document.getElementById("html-show");
if (htmlShow.style.display === "none") {
htmlShow.style.display = "block";
} else {
htmlShow.style.display = "none";
}
}
</script>