Question

在我开始讨论之前，我知道我应该学习jQuery但是我还没有达到这个目标，我想先学习原始JavaScript！好吧，主要是。有人可以帮助我而不使用jQuery，只是为了理解，谢谢！：

嗨，我是JavaScript的新手，不久就开始学习它了，因为你可以通过第一个代码看到它（这样我可以离开它）进行导航。

然而，我的问题出现在第二段代码中我在观看事件听众等视频后从不同的角度尝试某些事情，我写的所有内容都有意义，对我来说，我正在经历它一步一步地，它选择了所有正确的东西，但它仍然没有显示出预期的结果!!

单击CSS时，我希望它显示带有id＆＃34; cs＆＃34;的div，以及HTML和JavaScript的div。

我真的不知道JavaScript足以解决这个问题，我无法想到任何事情来帮助解决这个问题！

有人救我，拜托，我的思绪疯了，我想上床睡觉！

这是代码，这里是JS小提琴：https://jsfiddle.net/pmj26o9p/2/

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

编辑：再次阅读代码我不认为它会达到我想要的效果，即使它有效。这会让我显示和隐藏我点击的权利吗？

我想显示点击后的内容，然后隐藏/应用display：none给所有未点击的内容。

Answer 1

根据您的编辑评论，下面的示例将显示所选区块并隐藏其他区块。

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

function contentShow(el) {
  var whichOne = el.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

  // show selected block, hide the others
  switch (switcheroo) {
    case htm:
      htm.style.display = "block";
      css.style.display = "none";
      js.style.display = "none";
      break;
    case js:
      htm.style.display = "none";
      css.style.display = "none";
      js.style.display = "block";
      break;
    case css:
      htm.style.display = "none";
      css.style.display = "block";
      js.style.display = "none";
      break;
  }
}

<span data-id="htm" onClick="contentShow(this)" style="margin-right:10px;color:red; cursor:pointer">Click to show the HTML Block</span>
<span data-id="css" onClick="contentShow(this)" style="margin-right:10px;color:green; cursor:pointer">Click to show the CSS Block</span>
<span data-id="js" onClick="contentShow(this)" style="margin-right:10px;color:blue; cursor:pointer">Click to show the JS Block</span>
<br/>
<br/>
<div id="htm">Some HTML info here</div>
<div id="css" style="display:none">Some CSS info here</div>
<div id="js" style="display:none">Some JavaScript info here</div>

Answer 2

您将第二个事件处理程序绑定到switcheroo元素，但是没有触发click事件，所以没有任何反应。

如果你想对switcheroo变量进行切换功能，你应该这样做：

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);
  return toggleDisplay(switcheroo);
}

function toggleDisplay(elem) {
  if (elem.style.display === "none") {
    elem.style.display = "";
  } else {
    elem.style.display = "none";
  }
}

Answer 3

忽略其他不良做法，请更改

var htm = document.getElementById('htm');
var css = document.getElementById('css');
var js = document.getElementById('js');

htm.addEventListener("click", contentShow);
css.addEventListener("click", contentShow);
js.addEventListener("click", contentShow);

function contentShow() {
  var whichOne = this.attributes["data-id"].value;
  var switcheroo = document.getElementById(whichOne);

switcheroo.onclick = function() {

  if (switcheroo.style.display === "none") {
    switcheroo.style.display = "";
  } else {
    switcheroo.style.display = "none";
  }

}

更像是：

var doc = document;
function E(id){
  return doc.getElementById(id); // you guessed it - same as document.getElementById, without typing it every time
}
var htm = E('htm'), css = E('css'), js = E('js');
contentShow = (function(){ // self-executing scopes off var showing - variable style assignment requires function definition before execution
  var showing = false;
  return function(){ // returns unexecuted function
    var ht = E('ht').style, cs = E('cs').style, jsc = E('jsc').style;
    if(showing){
      ht.display = cs.display = jsc.display = 'none'; showing = false;
    }
    else{
      ht.display = cs.display = jsc.display = 'block'; showing = true;
    }
  }
})();
htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

请参阅更新的JSFiddle here。

如果这些元素上没有其他点击事件，您甚至可以更改

htm.addEventListener('click', contentShow);
css.addEventListener('click', contentShow);
js.addEventListener('click', contentShow);

到

htm.onclick = css.onclick = js.onclick = contentShow;

JSFiddle here

但请记住，此技术会覆盖之前相同类型的事件。

Answer 4

我知道你在这里寻找一个javascript解决方案。并且在你进入jquery之前想要了解javascript而感谢你，但这里有一个开箱即用的解决方案....纯HTML和CSS

.info {display:none;}
.info:target{display:block;}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js"  style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div id="htm" class="info">Some HTML info here</div>
<div id="css" class="info">Some CSS info here</div>
<div id="js"  class="info">Some JavaScript info here</div>

我在这里所做的是利用内部页面ID链接和:target选择器。在我看来，这更具语义性，并且仍然可以通过脚本扩展，同时仍然保持语义。此选项还为您的用户提供了为选项添加书签等选项。

CSS选项2

此选项可实现初始显示。它不是那么干净，使用绝对定位和z索引。 Alos注意，它使用背景颜色来隐藏初始选项。

.info {position:relative;}
.info > div {
  position:absolute;
  top:0;
  left:0;
  background-color:#FFF;
  z-index:10;
  display: none;
}

#htm
{
  display:block;
  z-index:1;
}

.info > div:target {
  display: block;
}

<a href="#htm" style="margin-right:10px;color:red;">Click to show the HTML Block</a>
<a href="#css" style="margin-right:10px;color:green;">Click to show the CSS Block</a>
<a href="#js" style="margin-right:10px;color:blue;">Click to show the JS Block</a>
<br/>
<br/>
<div class="info">
  <div id="htm">Some HTML info here</div>
  <div id="css">Some CSS info here</div>
  <div id="js">Some JavaScript info here</div>
</div>

另外，您应该考虑使用javascript而不是display属性直接添加/删除css类。这样就可以使用CSS过渡。

Answer 5

这是@K Scandrett答案的变体，它增加了一些可扩展性/灵活性

var navElements = document.getElementsByClassName("nav");

//Add Event Listeners
for(var i = 0; i < navElements.length; i ++)
{
    navElements[i].addEventListener('click', contentShow, false);    
}

function contentShow(el) {
  var whichOne = el.target.attributes["data-id"].value;
  var target = document.getElementById(whichOne);

  for(var i = 0; i < navElements.length; i ++)
  {
    var content = document.getElementById(navElements[i].attributes["data-id"].value)
    content.style.display = content === target ? "block" : "none";      
  }
}

<span data-id="htm" style="margin-right:10px;color:red; cursor:pointer" class="nav">Click to show the HTML Block</span>
<span data-id="css"  style="margin-right:10px;color:green; cursor:pointer" class="nav">Click to show the CSS Block</span>
<span data-id="js"  style="margin-right:10px;color:blue; cursor:pointer" class="nav">Click to show the JS Block</span>
<br/>
<br/>
<div id="htm">Some HTML info here</div>
<div id="css" style="display:none">Some CSS info here</div>
<div id="js" style="display:none">Some JavaScript info here</div>

为什么我的JavaScript工作没有成功！？它选择了ID但未赢取显示更改

5 个答案: