クリックで表示と非表示

Question

私はそれらをクリックすると、それぞれがウェブサイト上の特定のセクションを表示し、他の3つのセクションは隠したままにしておきます。この部分は素晴らしい作品です。

この新しいセクションが表示されると、4つの画像も表示されます。クリックすると、特定のセクションも表示され、新しい3つのセクションが非表示になります。ここに問題がある場所があります。

console.logsとインスペクタを使用しようとしましたが、すべてのコンテンツが表示されないようです。私は解決策を見つけ出すにはあまりにも多くのnewbです。

私はこの問題がどこにあるのかわからないので、コード全体を守っていますが、私はそれが私のJavaScriptにあると確信しています。私のウェブサイトのように機能させるためのコード全体は、1000行以上あります。

私はこれを解決するために何ができるのかに関するヒント/ヒント/アドバイスをお願いします。

画像の最初のロットがAboutBlurbTabsFunction（）を使用して他のすべての画像と2番目の画像を隠すために、別の機能が必要だと思いますが（私はそれを作成する方法がわかりません）、同じものを使用します。ここで

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