Javascript 显示/隐藏 Div 不起作用。试图模拟 VirginMedia 联系我们页面(无 jQuery)

Question

尝试模拟“联系我们”页面，该页面被分成三个大小相同的 div。尝试使用 JS 设置点击集以显示相应的 div 并隐藏任何打开的 div。由于某种原因，代码无法正常工作。任何帮助表示赞赏。我将删除我的 css，因为它只是不起作用的 HTML/JS。

我已经尝试为每个列表项编写单独的函数，但它没有在单击不同的 div 时关闭前一个(打开的)div。 开始了:

var showDivs = function(){

    //get array of all columns in the list
    var columns = document.getElementsByClassName('column');

    //get length of array
    var columnsLength = columns.length;

    //run a for loop through all the columns to apply the click function
    for(var a=0;a<columnsLength;a++){

      //get the element
      var el = columns[a];

      //set the on click
      el.onclick = function(e){

        //get the targeted element
        var _this = e.currentTarget;

        //get element ID
        var _thisId = _this.getAttribute("id");

        //slice ID to get number
        var _thisIdIndex = _thisId.slice(7);

        //get related content
        var _thisContent = document.getElementById("content-"+_thisIdIndex);

        //check to see if content is displaying already
        if(_thisContent.style.display === "block"){

          //yes - so hide it
          _thisContent.style.display = "none";
        }else{
          //no so lets hide all others and show it
          //get array of content
          var contents = document.getElementsByClassName('content');

          //get length of array
          var contentsLength = contents.length;

          //run a for loop through all content to apply hide or show
          for(var b=0;b<contentsLength;b++){

            //does the content ID NOT equal the ID of the related column index
            if(contents[b].getAttribute("id") !== "content-"+_thisIdIndex){

              //correct - hide this content
              contents[b].style.display = "none";
            }else{
              //nope - this is the content to show!
              contents[b].style.display = "block";
            }
          }
        }
      }
    }
  };

  showDivs();

.container{width:100%;}
.content{display: none;}
.column{width:33%;float:left;}

    <div class="container">
    <!--Table Left Column - Original Problem-->

        <div class="firstcolumn">
            <ul class="formatfix">
                <li class="title"><p style="padding: 0; margin: 0;">1. Choose a topic</p></li>
                <li id="column-ONE" class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li id="column-TWO" class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li id="column-THREE" class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li id="column-FOUR" class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li id="column-FIVE" class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li id="column-SIX" class="border-top selected"><a><i class="fa-tbc"></i>Something else</a></li>
            </ul>
        </div>

    <!-- Table Middle Column - Option 1 List-->

        <div id="content-ONE" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>List 1 Option 6</a></li>
            </ul>
        </div>

    <!-- Table Middle Column - Option 2 List-->

        <div id="content-TWO" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 6</a></li>
            </ul>
        </div>

    <!-- Table Middle Column - Option 3 List-->

        <div id="content-THREE" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 6</a></li>
            </ul>
        </div>

    <!-- Table Middle Column - Option 4 List-->

        <div id="content-FOUR" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 6</a></li>
            </ul>
        </div>

    <!-- Table Middle Column - Option 5 List-->

        <div id="content-FIVE" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 6</a></li>
            </ul>
        </div>

    <!--  Something Else Column -->

        <div id="content-SIX" class="column content">
            <ul class="formatfix">
                <li class="border-bottom title"><p style="padding: 0; margin: 0;">2. Tell us more</p></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 1</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 2</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 3</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 4</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 5</a></li>
                <li class="selected"><a><i class="fa-tbc"></i>Option 6</a></li>
            </ul>
        </div>

    </div>

就目前而言，点击后没有任何反应。 HTML 可能有问题，但我太初级了，无法表达 JS 需要工作的内容。感谢您的帮助。

Answer 1

您的代码有很多错误。 主要columns开始为 undefined因为您在 View 加载之前查看 View 。 如果你这样做:

setTimeout (() => {            
    showDivs ();
}, 500);

然后将定义 yes 列。

但这种做法也不正确。你必须放一个 onload <body> 中的标签并传递给它一个函数。然后在这个函数中将加载 View ，你可以安静地工作。

我建议研究如何在 javascript 中进行调试。

希望对您有所帮助!