Question

我正在使用来自this answer的javascript，但由于我想要多个页面，有时会显示/隐藏更多或更少的div我想调用该函数而不会列出所有divId＆＃39;秒。我尝试使用选择器应用启动并添加一个类并调用该类，但我无法使其工作。

我还对divVisibility函数进行了更改（将null替换为divId），因为我希望始终有一个div可见。这有效，但在我看来，第一个函数可能会收紧，因为我对if和else操作都有相同的行。

任何帮助表示感谢。

改善我的问题。这是我在JS第5行进行微小编辑的脚本。它目前确实有效，但我不想包括所有div名称（＆＃34; Div1＆＃34;，＆＃34; Div2＆＃34;，＆＃34; Div3＆＃34;等）并检查它是否可以再紧缩了。

＆＃13;

var divs = ["Div1", "Div2", "Div3", "Div4"];
    var visibleDivId = null;
    function divVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = divId;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }

＆＃13;

.buttons a {
  font-size: 16px;
}
.buttons a:hover {
  cursor:pointer; 
  font-size: 16px;
}

＆＃13;

<div class="main_div">
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a> | 
<a href="#" onclick="divVisibility('Div2');">Div2</a> | 
<a href="#" onclick="divVisibility('Div3');">Div3</a> | 
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>

＆＃13;

Answer 1

这是一个答案，其中锚（<a>）标记的数量来自html正文中div个元素的数量。这里也没有jQuery。

如果您<div class="buttons"> id以及inner_div div共同class，则可以选择所有inner_div按类名称生成元素并为它们生成锚标记。

然后，您可以通过将所有div设置为style="display: none;"，然后仅在与您单击的ID相匹配的元素上设置style="display: block;"来消除div可见的逻辑。< / p>

＆＃13;

    var divs = document.getElementsByClassName('invizdiv');

    /* 
     This bit sets up your anchor tags dynamically depending on
     how many divs you have with the class 'invizdiv'
    */
    for (var i = 0; i < divs.length; i++) {
        var listDivId = divs[i].id.slice();
        var newAnchor = document.createElement('a');
        newAnchor.innerHTML = listDivId;
        newAnchor.className = "buttons";
        newAnchor.href = '#';
        newAnchor.setAttribute('targetdiv', listDivId);
        // console.log(listDivId);
        newAnchor.addEventListener('click', function(elem, event) {
            // console.log(elem);
            // console.log(event);
            divVisibility(elem.target.getAttribute('targetdiv'));
        });
        document.getElementById('button_list').appendChild(newAnchor);
    }

    // here onwards is unchanged
    var visibleDivId = null;

    function divVisibility(divId) {
        var div;
        for (var i = 0; i < divs.length; i++) {
            div = divs[i];
            div.style.display = "none";
        }
        div = document.getElementById(divId);
        div.style.display = "block";
    }

＆＃13;

.buttons a {
  font-size: 16px;
}

.buttons a:hover {
  cursor: pointer;
  font-size: 16px;
}

＆＃13;

<div class="main_div">
  <div id="button_list" class="buttons">
    <!-- We'll dynamically add here later -->
  </div>
  <div class="inner_div">
    <div id="Div1" class="invizdiv">I'm Div One</div>
    <div id="Div2" class="invizdiv" style="display: none;">I'm Div Two</div>
    <div id="Div3" class="invizdiv" style="display: none;">I'm Div Three</div>
    <div id="Div4" class="invizdiv" style="display: none;">I'm Div Four</div>
  </div>
</div>

＆＃13;

Answer 2

我看到你在没有jQuery的情况下工作，所以这里是一个没有答案的答案。

遍历所有inner_div子项并默认隐藏它们，然后显示内容div 1.之后隐藏和显示由点击处理程序处理。

当然，这是一种做法。

＆＃13;

function hideAllContent(){
  // loop over the inner_div children and hide them
  Array.prototype.forEach.call(document.getElementById('inner_div').children, function(v){
    v.style.display = 'none';
  })
}
function divVisibility(divId){
  var el = document.getElementById(divId);
  if(el){
    hideAllContent();
    el.style.display = 'block';
  }
}

hideAllContent();
divVisibility('Div1'); // open by default with this content

＆＃13;

.buttons a {
  font-size: 16px;
}
.buttons a:hover {
  cursor:pointer; 
  font-size: 16px;
}

＆＃13;

<div class="buttons">
  <a href="#" onclick="divVisibility('Div1');">Div1</a> | 
  <a href="#" onclick="divVisibility('Div2');">Div2</a> | 
  <a href="#" onclick="divVisibility('Div3');">Div3</a> | 
  <a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div id="inner_div">
  <div id="Div1">I'm Div One</div>
  <div id="Div2">I'm Div Two</div>
  <div id="Div3">I'm Div Three</div>
  <div id="Div4">I'm Div Four</div>
</div>

＆＃13;

Javascript：选择多个div ID＆＃39; s

2 个答案: