为什么我的JavaScript不能工作?它选择ID，但不应用显示更改。

Before I get in to this, I know I should learn jQuery but I haven't got to that yet, I want to learn raw JavaScript first! Well, mostly. Can someone help me without the use of jQuery please just for understanding, thank you!:

在这之前，我知道我应该学习jQuery，但是我还没有达到这个目的，我想先学习一下原始的JavaScript !嗯,主要是。有人能帮助我不用jQuery吗?请谅解，谢谢!

Hi, I'm new to JavaScript, not long started learning it as you can see by the first code (which works so I'm leaving it) for the navigation.

嗨，我是JavaScript新手，不太长时间开始学习它，你可以看到第一个代码(我要离开它)的导航。

However, my problem comes on the 2nd piece of code I'm trying something from a different angle after watching videos on event listeners etc and everything I have written makes sense, to me, I'm going through it step by step, it's selecting all the right stuff, but it's still not showing the desired result!!

然而,我的问题是在第二段代码,我尝试从不同的角度观看视频后事件监听器等我写有意义的一切,对我来说,我要一步一步,选择所有正确的东西,但它仍然是不显示所需的结果! !

When you click CSS i want it to show the div with id "cs", and same for the HTML and JavaScript ones.

当您单击CSS时，我希望它显示带有id“cs”的div，而HTML和JavaScript则是相同的。

I really don't know JavaScript enough to solve this myself, I can not think of anything AT ALL to help with the problem!

我真的不知道JavaScript能解决这个问题，我想不出有什么办法来解决这个问题!

Somebody save me, please, my mind is going crazy and I want to go to bed!

有人救了我，我疯了，我想睡觉了!

Here is the code, and here is the JS fiddle: https://jsfiddle.net/pmj26o9p/2/

这里是代码，这里是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";
  }

}

EDIT: On reading through the code again I don't think it will achieve what I want even if it works. This will let me show and hide whichever I'm clicking right?

编辑:再次阅读代码时，我认为它不会达到我想要的效果。这将让我显示和隐藏任何我点击的对吗?

I want to show the clicked one but then hide / apply display:none to all others that aren't clicked.

我想要显示单击的那个，然后隐藏/应用显示:对所有未被单击的其他显示。

5 个解决方案

#1

My example below will show the chosen block and hide the others, as per your EDIT comment.

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

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>

#2

you are binding a second event handler to the switcheroo element, but the click event is not triggered so nothing happens.

您正在将第二个事件处理程序绑定到switcheroo元素，但是单击事件不会触发，所以不会发生任何事情。

If you want to make a toggle function on the switcheroo variable, you should do this instead:

如果你想在开关变量上做一个切换函数，你应该这样做:

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";
  }
}

#3

Ignoring your other bad practices, change

忽略你的其他坏习惯，改变。

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";
  }

}

to something more like:

更像是:

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

See updated JSFiddle here.

看到JSFiddle更新。

If there are no other click Events on those Elements, you could even change

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

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

to

来

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

JSFiddle here

JSFiddle这里

but keep in mind this technique overwrites previous Events of the same type.

但是请记住，这种技术覆盖了以前相同类型的事件。

#4

Here is a variation of @K Scandrett answer which add some scalability/flexibility

这里是@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>

#5

I know you're looking for a javascript solution here.and kudos to you for wanting to understand javascript before getting into jquery, but here is an out of the box solution for you.... pure HTML and CSS

我知道你在寻找一个javascript解决方案。和荣誉在进入之前你想要理解javascript jquery,但这里是一个开箱即用的解决方案为您....纯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>

What I've done here is, leverage internal page id links and the :target selector. In my mind, this is more semantic and can also still be extended by scripting while still maintaining semantics. This option also gives your uses the option of bookmarking selections etc.

我在这里所做的是，利用内部页面id链接和:目标选择器。在我看来，这是更多的语义，而且还可以通过脚本进行扩展，同时仍然保持语义。这个选项也提供了书签选项的选项。

CSS OPTION 2

CSS选项2

This option achieves the initial display. It is not as clean and uses absolute positioning and z-indexes. Alos note that is uses a background color to conceal the initial option.

此选项实现初始显示。它不那么干净，使用绝对定位和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>

On a side note you should consider adding/removing css classes using javascript instead of the display property directly. This will enable the use of CSS transitions.

另一方面，您应该考虑使用javascript而不是直接显示属性来添加/删除css类。这将启用CSS转换。