显示和隐藏点击

Question

我有4个图像，当我点击它们时，它们每个显示网站上的特定部分，并保持其他三个部分隐藏。这部分工作很好。

当新的部分出现时，它也有4个图像，当我点击它们时，它们也会显示它们的特定部分，并将新的三部分隐藏起来。这是问题所在。

我试过使用console.logs和检查器，它似乎我的所有内容都隐藏起来。我是一个能够找出解决方案的新手。

我已将整个代码保留在页面之外，因为我不知道问题出在哪里，但我完全相信它在我的javascript中。整个代码让它像我的网站一样运行超过一千行。

关于我能做些什么来解决这个问题的任何建议/提示/建议？

我想我需要另一个功能（但不知道该如何去创造吧）作为第一批图像的使用AboutBlurbTabsFunction（）隐藏一切，第二大量的图片，我用的是同一个。

Here is the website

Here is the jsfiddle

下面是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

问题可能就出在这里。

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

您试图获得下一个元素，但没有做任何事情。改变它到这样的事情应该工作。

<!-- 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";