Question

我有20/30的div。如果我点击一个按钮，onClick将告诉该函数显示welcomeDiv1 但它也应该隐藏welcomeDiv2 / 3/4/5/6等。

与显示welcomeDiv7相同，然后需要隐藏welcomeDiv1 / 2/3/4/5/6/8/9等。

Script: 
        function showDiv1() {
   document.getElementById('welcomeDiv').style.display = "none";
   document.getElementById('welcomeDiv1').style.display = "block";
}

^^现在它实际应该隐藏名为welcomeDiv的所有div ..期待welcomeDiv1

第一个代码

    <div class="websites">
        <div id="welcomeDiv"  style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
        <div id="welcomeDiv1"  style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
    </div>

第二个代码

        <a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
        <script>
        function showDiv() {
   document.getElementById('welcomeDiv1').style.display = "none";
   document.getElementById('welcomeDiv').style.display = "block";
}
        </script>
        <a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
        <script>
        function showDiv1() {
   document.getElementById('welcomeDiv').style.display = "none";
   document.getElementById('welcomeDiv1').style.display = "block";
}
        </script>

Answer 1

您必须使用for循环，例如

function showDiv(div){
    for (i = 0; i => 100; i++){
       var x = document.getElementById('exampleDiv-' + i);
       x.style.display = 'none';
       //You can also use visibility to get animations work.
    }
    var y = document.getElementById('exampleDiv-' + i);
    y.style.display = 'block';
}

Answer 2

您可以重构HTML /脚本。使用元素保留目标，稍后可以使用Element.dataset属性检索。

学习使用addEventListener()附加事件处理程序。

以下是一个示例代码段：

document.querySelectorAll('.button').forEach(function(element) {
  element.addEventListener('click', function() {
    var _this = this;
    document.querySelectorAll('.welcome').forEach(function(welcome) {
      if (_this.dataset.target == welcome.id) {
        welcome.style.display = "block";
      } else {
        welcome.style.display = "none";
      }
    })
  });
});

.welcome {
  display: none
}

<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>

<br/>

<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>

Answer 3

同时为每个div提供一个WelcomeDiv类。然后，您只需隐藏整个WelcomeDiv类并显示所需的类。例如：

divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
    divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";

Answer 4

如果您正在尝试没有循环，因为您有a和div（循环通过更多元素会影响性能），那么我建议添加show类到显示div

＆＃13;

function showDiv(t) {
  if (document.querySelector('.show'))
    document.querySelector('.show').className = "welcome";
  document.getElementById(t.dataset.target).className = "welcome show";
}

＆＃13;

.welcome {
  display: none;
}
.show {
  display: block;
}
.button {
  background-color: #0095ff;
  border-color: #07c;
  cursor:pointer;
  padding:0px 20px;
}

＆＃13;

<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>

<br/>

<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>

＆＃13;

使用单选按钮

如果你没有循环尝试，因为你有a和div，那么我建议使用隐藏的单选按钮方法

＆＃13;

function showDiv(t) {
  document.getElementById(t.rel).click();
}

＆＃13;

.answer_list {
  display: none;
}

.webrad {
  display: none;
}

.webrad:checked+.answer_list {
  display: block;
}

.text1 {
  background-color: #0095ff;
  border-color: #07c;
  cursor:pointer;
  padding:0px 20px;
}

＆＃13;

<div class="websites">
  <a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
  <a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
  <input id="welcomeRadio" class="webrad" type="radio" name="websites" />
  <div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
  
</object></div>
  <input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
  <div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
  
</object></div>
</div>

＆＃13;

Answer 5

为您提供简单易用的解决方案：

produces = MediaType.APPLICATION_JSON_VALUE

Answer 6

好吧，我在可爱的互联网的帮助下修复了我的自我

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
      super.onViewCreated(view, savedInstanceState);
      ButterKnife.bind(this, view);
}

HTML 1：

    function MyFunction(divName){

    //hidden val
    var hiddenVal = document.getElementById("tempDivName"); 

    //hide old
    if(hiddenVal.Value != undefined){
        var oldDiv = document.getElementById(hiddenVal.Value); 
        oldDiv.style.display = 'none'; 
    }

    //show div
        var tempDiv = document.getElementById(divName); 
        tempDiv.style.display = 'block';              

    //save div ID
        hiddenVal.Value = document.getElementById(divName).getAttribute("id");

    }

和html 2：

<input id="tempDivName" type="hidden" />
    <a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>

    <a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>

    <a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>

按钮单击显示分区并隐藏其他分区

6 个答案: