Zeigen und verbergen bei Klick

Question

Ich habe 4 Bilder, die, wenn ich auf sie klicke, zeigen sie jeweils einen bestimmten Abschnitt auf der Website und halten die anderen drei Abschnitte verborgen. Dieser Teil funktioniert super.

Wenn dieser neue Abschnitt erscheint, hat er auch 4 Bilder und wenn ich auf sie klicke, werden sie auch ihren spezifischen Abschnitt zeigen und die neuen drei verborgen halten. Hier liegt das Problem.

Ich habe versucht mit console.logs und dem Inspektor und es scheint, dass alle meine Inhalte ausgeblendet wird. Ich bin zu viel Neuling, um eine Lösung zu finden.

Ich habe den gesamten Code von der Seite behalten, weil ich nicht weiß, wo genau das Problem herrührt, aber ich bin 100% sicher, dass es in meinem Javascript ist. Der ganze Code, um es wie meine Website funktionieren zu lassen, ist über tausend Zeilen.

Irgendwelche Vorschläge/Tipps/Ratschläge, was ich tun kann, um dies zu lösen bitte?

Ich denke, ich brauche eine andere Funktion (aber nicht sicher, wie man es erstellt) als die erste Menge von Bildern verwenden Sie AboutBlurbTabsFunction(), um alles andere und die zweite Menge von Bildern zu verstecken, verwende ich die gleiche.

Here is the website

Here is the jsfiddle

Hier ist der Code Javascript:

jQuery(document).ready(function(){ 

    simpleForEach(document.getElementsByClassName("blurbtabs"), function(tc) { 
      tc.style.display = "none"; 
     }); 

    jQuery(".blurbclick").click(function(){ 
     jQuery(".blurbtabs").hide(); 
     jQuery("#"+ jQuery(this).attr("data-about")).show(); 
     console.log(jQuery(this).attr("data-about")); 
    }); 

    jQuery(".tabimg").click(function(){ 
     console.log("img tab click function"); 
     jQuery(".tabcontent").hide(); 
     jQuery("#"+ jQuery(this).attr("data-about")).show(); 
     console.log("#" + jQuery(this).attr("data-about")); 
    }); 


    function simpleForEach(array, callback) { 
     for (var i = 0; i < array.length; i++) { 
      callback(array[i], i); 
     } 
    }; 

    function AboutBlurbTabsTarget() { 
     jQuery(document).ready(function(){ 
      var target = document.createAttribute("data-about"); 
      var tclient = document.createAttribute("data-about"); 
      var tshoot = document.createAttribute("data-about"); 
      var tproduct = document.createAttribute("data-about"); 

      var photographer = document.getElementById("bphotographer"); 
      target.value = "sphotographer"; 
      photographer.setAttributeNode(target); 

      var client = document.getElementById("bclient"); 
      tclient.value = "sclient"; 
      client.setAttributeNode(tclient); 

      var shoot = document.getElementById("bshoot"); 
      tshoot.value = "sshoot"; 
      shoot.setAttributeNode(tshoot); 

      var product = document.getElementById("bproduct"); 
      tproduct.value = "sproduct"; 
      product.setAttributeNode(tproduct); 

      console.log("first function reached the end internally"); 
     }); 
     console.log("first function ran through"); 
    }; 

    function AboutBlurbTabsFunction() { 
     console.log("function called"); 
     var tabimgs = document.getElementsByClassName("tabimg"); 
     console.log("var tabimgs: " + tabimgs); 
     <!-- for each tabimg --> 
     simpleForEach(tabimgs, function(tabimg) { 
      console.log("simple for each called!"); 
       var aboutSection = tabimg.getAttribute("data-about"); 

       <!-- add the click event listener --> 
       tabimg.addEventListener("click", function(evt) { 
        <!-- onclick do: --> 

        <!-- hide all tabcontents --> 
        simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) { 
         tc.style.display = "none"; 
         console.log("hide all tabcontents"); 

        }); 

        <!-- remove the active class --> 
        simpleForEach(document.getElementsByClassName("tabimg"), function(ti) { 
         ti.className = ti.className.replace(" active", ""); 
         console.log("remove active"); 
        }); 

        <!-- show the current tab, and add "active" class to the link that opened the tab --> 
        document.getElementById(aboutSection); 
        tabimg.className += " active"; 
        console.log("what section is called" + aboutSection); 
        console.log("what tabimg is at work here: " + tabimg.className); 
        console.log("what tabimg is at work here: " + tabimg.getAttribute("data-about")); 
       }); 
     }); 
     //console.log("second function ran through"); 
    }; 

    AboutBlurbTabsFunction(); 
    AboutBlurbTabsTarget(); 
}); 

Answer 1

Das Problem wahrscheinlich liegt hier.

<!-- show the current tab, and add "active" class to the link that opened the tab --> 
document.getElementById(aboutSection); 
tabimg.className += " active"; 

Sie haben versucht, das nächste Element zu bekommen, haben aber nichts dagegen getan. Ändern Sie es in so etwas sollte funktionieren.

<!-- show the current tab, and add "active" class to the link that opened the tab --> 
var nextSection = document.getElementById(aboutSection); 
nextSection.style.display = 'block'; 
tabimg.className += " active";