无jQuery实现VirginMedia联系页：JS显示/隐藏Div功能故障求助

我帮你定位到了核心问题，并且修正了代码逻辑——你把点击事件绑定到了错误的元素上，导致左侧列表点击完全没反应。咱们一步步来修复：

问题根源 #

你的JS代码里用document.getElementsByClassName('column')选中的是右侧的内容展示div（那些带column类的区块），但你需要绑定点击事件的是左侧列表里的<li>选项（带selected类的元素），这就是点击无任何反应的关键原因！

另外，之前独立函数无法关闭已打开div的问题，本质也是因为没有正确遍历并隐藏所有内容区块，不过现在的逻辑框架是对的，只需要调整绑定目标即可。

修正后的完整代码 #

HTML（结构不变，确保语义清晰） #

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

CSS（新增布局对齐与初始显示） #

.container{width:100%; overflow: hidden;} /* 清除浮动影响 */
.content{display: none;}
#content-ONE {display: block;} /* 默认显示第一个内容区块 */
.column{width:33%;float:left;}
.firstcolumn {width: 33%; float: left;} /* 左侧列表设为三分之一宽度，保持三列对齐 */

JavaScript（修正事件绑定目标，优化逻辑） #

var showDivs = function(){
  // 精准选中左侧列表里的可点击选项，避免选中右侧的selected类元素
  var columns = document.querySelectorAll('.firstcolumn li.selected');
  var columnsLength = columns.length;

  for(var a=0;a<columnsLength;a++){
    var el = columns[a];
    // 用addEventListener绑定事件，比onclick更可靠，不会覆盖事件
    el.addEventListener('click', function(e){
      var _this = e.currentTarget;
      var _thisId = _this.getAttribute("id");
      // 截取ID后缀（column-ONE → ONE）
      var _thisIdIndex = _thisId.slice(7);
      var _thisContent = document.getElementById("content-"+_thisIdIndex);
      
      // 先隐藏所有内容区块
      var contents = document.getElementsByClassName('content');
      var contentsLength = contents.length;
      for(var b=0;b<contentsLength;b++){
        contents[b].style.display = "none";
      }

      // 再判断当前内容是否需要显示/切换
      if(_thisContent.style.display === "block"){
        _thisContent.style.display = "none";
      } else {
        _thisContent.style.display = "block";
      }
    });
  }
};

// 确保DOM加载完成后执行，避免找不到元素
document.addEventListener('DOMContentLoaded', showDivs);

关键修改点说明 #

1. 修正事件绑定目标：把getElementsByClassName('column')改成querySelectorAll('.firstcolumn li.selected')，精准绑定左侧列表的可点击项。
2. 优化事件绑定方式：使用addEventListener代替onclick，避免多个事件被覆盖的问题。
3. 布局与初始状态优化：给左侧列表添加宽度确保三列对齐，默认显示第一个内容区，提升页面加载后的用户体验。
4. 逻辑调整：先隐藏所有内容，再处理当前项的显示/切换，确保每次点击最多只有一个内容区处于显示状态。

现在测试一下，点击左侧的每个选项，对应的内容区会正常显示，其他内容区自动隐藏；点击同一个选项还可以切换显示/隐藏状态，完美实现你想要的效果！

内容的提问来源于stack exchange，提问作者S M