Question

我正在构建一个关于我们的页面，我希望使用JavaScript来显示/隐藏/替换DIV的内容，其中包含视觉声明或生物，具体取决于用户点击的内容。我是使用脚本的新手，所以我希望之前有人这样做过。

我目前有一个生物按钮和一个视觉按钮，虽然我能够显示和隐藏文本没有问题我不知道如何更换DIV，以便生物和视觉不显示在同时。

这是我到目前为止所做的：

 function showhide(id) {
   var e = document.getElementById(id);
   e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 }

<button type="button" onclick="javascript:showhide('vision')">Vision</button>
<button type="button" onclick="javascript:showhide('bio')">Bio</button>

<div id="vision" style="display: none;">
  <p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
  <p>This is my bio</p>
</div>

我也希望按钮文字更改为“隐藏生物”或“隐藏视觉”，具体取决于显示的内容。

如果有人可以帮忙解决这个问题，那么像我这样的Java Noob会非常感激。

这也是我第一次使用像这样的论坛，所以任何指针或反馈都很受欢迎......要从某个地方开始，对吗？

UPDATE - I attached an image to give a better idea of what I'm try to accomplish.

Answer 1

尝试将this对象传递到内联事件处理程序，并检查内容的display状态为toggle按钮的文本，

<强> HTML：

<button type="button" onclick="javascript:showhide('vision',this)">Vision</button>
<button type="button" onclick="javascript:showhide('bio',this)">Bio</button>

<div id="vision" style="display: none;">
  <p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
  <p>This is my bio</p>
</div>

<强> JS

function showhide(id,elem) {
   var e = document.getElementById(id);
   var cond = (e.style.display == 'block');
   e.style.display = cond ? 'none' : 'block';
   elem.textContent = (id == "vision") ? (cond ? "Show Vision" : "Hide Vision") 
                                    : (cond ? "Show Bio" : "Hide Bio");

}

DEMO

Answer 2

逻辑存在一些问题。如果你显示/隐藏一个div，你仍然需要隐藏/显示第二个div。因此，您可以添加更多行代码来执行此操作...或者只是您可以使用一个div并根据单击的按钮更新其内容。

所以你可以试试这个：

<script>
var textStrings = {"author1": {"Vision":"this is author1 vision", "Bio":"this is author1 bio"},
                   "author2": {"Vision":"this is author2 vision", "Bio":"this is author2 bio"},
                   "author3": {"Vision":"this is author3 vision", "Bio":"this is author3 bio"}};
function showhide(element) {
  reset();
  var id=element.id;
  var author = document.getElementById("authors").elements["authors"].value;
  var flag = document.getElementById('content').innerHTML == textStrings[author][id];
  document.getElementById('content').innerHTML = flag ? "" : textStrings[author][id];
  element.innerHTML = flag ? id : "hide " + id;
}
function reset(){
  for (var k in textStrings["author1"]){
    document.getElementById(k).innerHTML = k;
  }
 }

function resetAuthor(){
  document.getElementById('content').innerHTML = ""
  reset();
}

</script>

<form id="authors">
 <input type="radio" name="authors" id="author1" onchange="resetAuthor()" value="author1" checked> author 1
 <input type="radio" name="authors" id="author2" onchange="resetAuthor()" value="author2"> author 2
 <input type="radio" name="authors" id="author3" onchange="resetAuthor()" value="author3"> author 3
</form>

<div style="display:inline">
<button type="button" id="Vision" onclick="javascript:showhide(this)">Vision</button>
<button type="button" id="Bio" onclick="javascript:showhide(this)">Bio</button>
</div>
<div style="display: block;">
  <p id="content"></p>
</div>

如果您再次点击该按钮，此代码也会将内容切换/设置为空。

DEMO

Answer 3

试试这个。

var prevPage = "";
var currPage = "";

function showhide(event) {
  prevPage = currPage;
  currPage = event.id.split("_")[1];
  if(prevPage !== currPage){
    showEle(currPage);
    if(prevPage !== ''){
    	hideEle(prevPage);
    }
  } else {
    toggle(currPage);
  }
}

function toggle(id){
  var curr = document.getElementById(id);
  if(curr.style.display === 'block'){
    curr.style.display = 'none';
    updateBtn('btn_'+id, 'Show');
  } else {
    curr.style.display = 'block';
    updateBtn('btn_'+id, 'Hide');
  }
  
}

function updateBtn(id, newStr){
  var btn = document.getElementById(id);
  btn.innerHTML = newStr + ' ' + btn.innerHTML.split(' ')[1];
}

function showEle(id){
  document.getElementById(id).style.display = 'block';
  updateBtn('btn_'+id, 'Hide');
}

function hideEle(id){
  document.getElementById(id).style.display = 'none';
  updateBtn('btn_'+id, 'Show');
}

<button id="btn_vision" type="button" onclick="showhide(this)">Show Vision</button>
<button id="btn_bio" type="button" onclick="showhide(this)">Show Bio</button>
<button id="btn_xyz" type="button" onclick="showhide(this)">Show Xyz</button>
<button id="btn_abc" type="button" onclick="showhide(this)">Show Abc</button>

<div id="vision" style="display: none;">
  <p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
  <p>This is my bio</p>
</div>
<div id="xyz" style="display: none;">
  <p>This is my xyz</p>
</div>
<div id="abc" style="display: none;">
  <p>This is my abc</p>
</div>

注意：您可能希望使用第一页的id初始化currPage，因为它提供了更好的感觉。比较currPage =“vision”，并为div id =“vision”制作显示块。

使用两个或多个按钮显示/隐藏和替换单个DIV中的文本

3 个答案:

DEMO