点击

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