单击时显示和隐藏

Question

我有 4 张图片，当我点击它们时，它们都会在网站上显示一个特定的部分，并隐藏其他三个部分。这部分效果很好。

当新部分出现时，它还有 4 张图片，当我单击它们时，它们也会显示其特定部分并隐藏新的三张图片。这就是问题所在。

我尝试过使用 console.logs 和检查器，似乎我的所有内容都被隐藏了。我太新手了，无法找到解决方案。

我已将整个代码保留在页面之外，因为我不知道问题到底出在哪里，但我 100% 确信它在我的 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";