css 属性“显示”无法正常工作

Question

I am having issues with the CSS property >display> On my page I have hidden 4 div elements using display=none property now using javascript I want to display each property separately I am able to hide the elements and am able to make them appear on click but it never displays like it should its either all inline and the formatting is wrong I have used a lot of values for display eg: inline,block etc but i still can't get it right if someone can help me out ill appreciate it the code I am using is :

<script type="text/javascript">
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
function myFunctionA() {
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionB() {
document.getElementById("b").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("c").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionC() {
document.getElementById("c").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("d").style.display="hidden";
}
function myFunctionD() {
document.getElementById("d").style.display="initial";
document.getElementById("a").style.display="hidden";
document.getElementById("b").style.display="hidden";
document.getElementById("c").style.display="hidden";
}
</script>

the page on which i see the result is :

http://theinformant.to/food-drink/

if you click on the names eg cooking, beverages you will see what am talking about

Answer 1

Your code is very repetitive. Try making it DRY (Don't Repeat Yourself). All you need is this:

 function myFunction(id){ var elements = document.querySelectorAll('.element'); for(var i=0; i<elements.length; i++){ elements[i].style.display = elements[i].id == id ? 'block' : 'none'; } }

 .element{display: none;} #a{display: block;}

 <button onclick="myFunction('a')">Show A</button> <button onclick="myFunction('b')">Show B</button> <button onclick="myFunction('c')">Show C</button> <button onclick="myFunction('d')">Show D</button> <div id="a" class="element">A</div> <div id="b" class="element">B</div> <div id="c" class="element">C</div> <div id="d" class="element">D</div>

Answer 2

它应该是display='none'而不是display='hidden' 。

Answer 3

You probably need to be toggling between display:hidden and display:block , as others have said. Consider using class names instead of updating the styles directly. This will make your code more manageable going forward. Also, see @blex's answer, as he's got some good advice on making the code less repetitive.

Here's an example of using classes instead of changing styles directly:

/* Hide an element */
document.getElementById('a').className = 'hide';

/* Show an element */
document.getElementById('a').className = '';

If you need to use more than one class on the elements, try classList.add('hide') and classList.remove('hide') instead.

Then in your CSS, you could use something like this:

.hide {
  display: none;
}

Answer 4

Suggestion. I see in the view source you use jQuery. Try using $('#domelementname') instead of document.getElementById("a") . There is more repetetive code.

Answer 5

<script type = "text/javascript" > document.write('<a style="display:block;width:100%;height:1px;" class="aff-ad-none"></a>');
    window.AFF_ONLOAD = window.AFF_ONLOAD || [];
    window.AFF_ONLOAD.push({
        lkid: "79197967",
        affid: "10207739",
        size: "120*600",
        type: "1",
        uid: "565258",
        language: "sp",
        web_id: "45",
        version: 110
    });
    var aff_s = document.createElement("script"),
        aff_h = document.getElementsByTagName("head")[0];
    aff_s.charset = "utf-8";
    aff_s.async = !0;
    aff_s.src = "https://js.firstgrabber.com/affasi_js.min.js";
    aff_h.insertBefore(aff_s, aff_h.firstChild); 
</script>