Question

嗨伙计们：我根据js练习的要求，使用js + html + css创建了一个制表符开关。代码如下所示：

var tab1 = document.getElementById('tab1'),
  tab2 = document.getElementById('tab2'),
  tab3 = document.getElementById('tab3'),
  c1 = document.getElementById('c1'),
  c2 = document.getElementById('c2'),
  c3 = document.getElementById('c3');

function changeTab1() {
  tab1.className = 'selected';
  tab2.className = '';
  tab3.className = '';
  c1.className = 'show'
  c2.className = '';
  c3.className = '';
}

function changeTab2() {
  tab1.className = '';
  tab2.className = 'selected';
  tab3.className = '';
  c1.className = '';
  c2.className = 'show';
  c3.className = '';
}

function changeTab3() {
  tab1.className = '';
  tab2.className = '';
  tab3.className = 'selected';
  c1.className = ''
  c2.className = '';
  c3.className = 'show';
}

h2 {
  border-top: solid cornflowerblue 1px;
  border-left: solid cornflowerblue 1px;
  width: 50px;
  height: 25px;
  margin: 0;
  float: left;
  text-align: center;
}

.tab-content {
  border: solid cornflowerblue 1px;
  width: 152px;
  height: 100px;
}

.tab-content div {
  display: none;
}

.selected {
  background-color: cornflowerblue;
}

.tab-content .show {
  display: block;
}

<script src="js/tab.js" type="text/javascript">
<div class="tab-head">
  <h2 id="tab1" onclick="changeTab1()" class="selected">1</h2>
  <h2 id="tab2" onclick="changeTab2()">2</h2>
  <h2 id="tab3" onclick="changeTab3()">3</h2>
</div>
<div class="tab-content">
  <div id="c1" class="show">content1</div>
  <div id="c2">content2</div>
  <div id="c3">content3</div>
</div>

当我点击带有id = tab1，tab2和＆amp;的h2时，任何人都可以告诉我为什么Tab键开关不起作用tab3分别？我需要引用任何外部来源吗？我已经在每个标题元素上写了onclick，我只是想知道是什么原因导致了我的所有麻烦。

Answer 1

您的代码中的{{to-elsewhere named="my-right-sidebar" send=(component "cool-thing" model=model launch=(action "launchIt"))}}引用无效。删除它，然后再试一次。以下是相同代码的工作片段。

tab.js

var tab1 = document.getElementById('tab1'),
  tab2 = document.getElementById('tab2'),
  tab3 = document.getElementById('tab3'),
  c1 = document.getElementById('c1'),
  c2 = document.getElementById('c2'),
  c3 = document.getElementById('c3');

function changeTab1() {
  tab1.className = 'selected';
  tab2.className = '';
  tab3.className = '';
  c1.className = 'show'
  c2.className = '';
  c3.className = '';
}

function changeTab2() {
  tab1.className = '';
  tab2.className = 'selected';
  tab3.className = '';
  c1.className = '';
  c2.className = 'show';
  c3.className = '';
}

function changeTab3() {
  tab1.className = '';
  tab2.className = '';
  tab3.className = 'selected';
  c1.className = ''
  c2.className = '';
  c3.className = 'show';
}

h2 {
  border-top: solid cornflowerblue 1px;
  border-left: solid cornflowerblue 1px;
  width: 50px;
  height: 25px;
  margin: 0;
  float: left;
  text-align: center;
}

.tab-content {
  border: solid cornflowerblue 1px;
  width: 152px;
  height: 100px;
}

.tab-content div {
  display: none;
}

.selected {
  background-color: cornflowerblue;
}

.tab-content .show {
  display: block;
}

使用javascript创建制表符开关

1 个答案: