使用Javascript显示/隐藏DIV的不工作。试图模拟维珍传媒联系我们页面（无jQuery的）

问题描述 投票：0回答：2

试图效仿其分为三个同样大小的div联系我们页面。企图用JS设置点击设置为显示相应的div和隐藏任何DIV是开放。出于某种原因，该代码是行不通的。任何帮助表示赞赏。因为它仅仅是HTML / JS这是不工作，我会删除我的CSS。

我曾尝试为每个列表项的编写单独的功能，并没有在点击不同的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需要工作。谢谢你的帮助。

javascript html css
2个回答
0
投票

您的代码有很多错误。因为你在视图看前先查看已装为主columns开始为undefined。如果你这样做：

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

然后是列将被定义。

但这种做法是不正确或者。你必须把一个onload标签在<body>，并通过它的功能。然后，在此功能的观点将被加载，你可以安静地工作。

我建议研究如何在JavaScript调试。

希望这有助于！

0
投票

谢谢您的回答。

我已经从“thisTarget”到“目标”改变JS代码，我周围选择列表中的DIV固定的问题，也是ID是在列表中的项目，而不是链接。

剧本也是在页面的底部...

现在所有的工作！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.