javascript - 无法找出我的代码有什么问题，Javascript/html/css

Question

对于我的学校练习，我必须创建 3 个可点击的选项卡，当它被点击时它应该打开另一个窗口 this should be the result when clicked.

我已经检查了我的代码很多次了，我找不到错误。因此，如果有人可以帮助我，那就太好了。

亲切的问候。

body {
  font-family: 'Roboto 2', 'Helvetica Neue';
  margin: 0;
  background: #DAD4D4;
  text-align: center;
}
.header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background: #70C26F;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
}
li {
  background: #70C26F;
  list-style-type: none;
}
.menu {
  left: -9999px;
  position: absolute;
  top: -9999px;
}
.menu-cirkel {
  display: none;
  cursor: pointer;
  display: block;
  position: fixed;
  top: 15px;
  z-index: 99;
  width: 70px;
  height: 70px;
  transition: all 400ms ease-in-out;
  border: 2px solid #D34237;
  border-radius: 50%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-cirkel:hover {
  border-color: #416EF8;
}

/*Insert strepen voor en na menu-streep*/
.menu-cirkel .menu-streep,
.menu-cirkel .menu-streep:before,
.menu-cirkel .menu-streep:after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  width: 35px;
  cursor: pointer;
  background: #D34237;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
}
.menu-cirkel:hover .menu-streep,
.menu-cirkel:hover .menu-streep:before,
.menu-cirkel:hover .menu-streep:after {
  background-color: #416EF8;
}

/*menu-streep positioneren*/
.menu-cirkel .menu-streep {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}
.menu-cirkel .menu-streep:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}
.menu-cirkel .menu-streep:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}

/*drawer definieren*/
.drawer {
  position: fixed;
  top: 100px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  height: 10%;
  visibility: hidden;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  width: 100%;
  box-shadow: 0px 8px 10px rgba(0,0,0,0.5);
}

/*Menu centreren*/
.menu-cirkel {
  left: 50%;
  -webkit-transform: translate3d(-50, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

/*On click*/
.menu:checked .menu-cirkel {
  border-color: #D34237;
}
.menu:checked ~ .menu-cirkel .menu-streep {
  background-color: transparent;
}
.menu:checked ~ .menu-cirkel .menu-streep:before {
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translatex(-50%) rotate(45deg);
}
.menu:checked ~ .menu-cirkel .menu-streep:after {
  transform: translateX(-50%) translateY(-10px);
  rotate(-45deg);

-webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
  top: 10px;
}
/*drawer slide down animatie*/
.drawer {
  z-index: 3;
  transition-duration: 500ms;
  background: #70C26F;
}
.drawer {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, -100%, 0);
}
.menu:checked ~ .drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
}

div {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
  margin: 0;
  width: 100%:
}
li {
  background: #70C26F;
  list-style-type: none;
}
li:hover {
  background: #0AFA76;
  opacity: 0.4; filter: alpha(opacity=4);
}

/*Tabs*/
.tabs {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  text-align: center;
}
.tab {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  margin: 10px;
  overflow: hidden;
  text-align: center;
  width: 20%;
  height: 50px;
  line-height: 48px;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.tab:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#tab1 {
  background-color: #F4DB33;
}
#tab2 {
  background-color: #962FF8;
}
#tab3 {
  background-color: #DC3C84;
}

/*Cards*/
.cards {
  position: relative;
  top: 150px;
  left: 60px;
  height: 300px;
  width: 80%;
  border-radius: 4px;
  text-align: start;
  overflow: hidden;
  background: #FFF;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.content-left {
  float: left;
  width: 22%;
  height: 300px;
  padding: 15px;
  text-align: center;
}
.content-right {
  padding-top: 15px;
  padding-left: 15px;
  float: right;
  width: 60%;
  height: 300px;
}
.x-icon {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 10px;
  font-size: 2.5em;
  background-color: #70C26F;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.x-icon:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#card1 .content-left {
  background-color: #F4DB33;
}
#card2 .content-left {
  background-color: #972FF8;
}
#card3 .content-left {
  background-color: #DC3C84;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Material Design</title>
    <link rel="stylesheet" href="materials.css">
</head>

<body>
    <div class="header">
        <input type="checkbox" id="menu" class="menu">
        <label class="menu-cirkel" for="menu">
            <span class="menu-streep"></span>
        </label>
        <nav class="drawer">
            <ul>
                <li>Card 1</li>
                <li>Card 2</li>
                <li>Card 3</li>
            </ul>
        </nav>
    </div>
    <div class="tabs">
        <div class="tab" id="tab1" onclick="document.getElementById('card1').display='block';
			 document.getElementById('card2').display='none';
			 document.getElementById('card3').display='none';">
            Tab 1
        </div>
        <div class="tab" id="tab2" onclick="document.getElementById('card1').display='none';
			 document.getElementById('card2').display='block';
			 document.getElementById('card3').display='none';">
            Tab 2
        </div>
        <div class="tab" id="tab3" onclick="document.getElementById('card1').display='none';
			 document.getElementById('card2').display='none';
		   	 document.getElementById('card3').display='block';">
            Tab 3
        </div>
    </div>
    <div class="cards" id="card1" style="display: none;">
        <div class="content-left">
            Card 1
            <div class="x-icon" onclick="document.getElementById('card1').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 1 </div>
    </div>
    <div class="cards" id="card2" style="display: none;">
        <div class="content-left">
            Card 2
            <div class="x-icon" onclick="document.getElementById('card2').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 2 </div>
    </div>
    <div class="cards" id="card3" style="display: none;">
        <div class="content-left">
            Card 3
            <div class="x-icon" onclick="document.getElementById('card3').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 3</div>
    </div>
</body>
</html>

Answer 1

在使用 JS 更改 css 属性时需要使用 style。像这样

document.getElementById('card1').style.display='block';

body {
  font-family: 'Roboto 2', 'Helvetica Neue';
  margin: 0;
  background: #DAD4D4;
  text-align: center;
}
.header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background: #70C26F;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
}
li {
  background: #70C26F;
  list-style-type: none;
}
.menu {
  left: -9999px;
  position: absolute;
  top: -9999px;
}
.menu-cirkel {
  display: none;
  cursor: pointer;
  display: block;
  position: fixed;
  top: 15px;
  z-index: 99;
  width: 70px;
  height: 70px;
  transition: all 400ms ease-in-out;
  border: 2px solid #D34237;
  border-radius: 50%;

  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-cirkel:hover {
  border-color: #416EF8;
}

/*Insert strepen voor en na menu-streep*/
.menu-cirkel .menu-streep,
.menu-cirkel .menu-streep:before,
.menu-cirkel .menu-streep:after {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  width: 35px;
  cursor: pointer;
  background: #D34237;
  display: block;
  content: '';
  transition: all 500ms ease-in-out;
}
.menu-cirkel:hover .menu-streep,
.menu-cirkel:hover .menu-streep:before,
.menu-cirkel:hover .menu-streep:after {
  background-color: #416EF8;
}

/*menu-streep positioneren*/
.menu-cirkel .menu-streep {
  transform: translate3d(-50%, -4px, 0);
  -webkit-transform: translate3d(-50%, -4px, 0);
}
.menu-cirkel .menu-streep:before {
  transform: translate3d(-50%, -14px, 0);
  -webkit-transform: translate3d(-50%, -14px, 0);
}
.menu-cirkel .menu-streep:after {
  transform: translate3d(-50%, 10px, 0);
  -webkit-transform: translate3d(-50%, 10px, 0);
}

/*drawer definieren*/
.drawer {
  position: fixed;
  top: 100px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  height: 10%;
  visibility: hidden;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  width: 100%;
  box-shadow: 0px 8px 10px rgba(0,0,0,0.5);
}

/*Menu centreren*/
.menu-cirkel {
  left: 50%;
  -webkit-transform: translate3d(-50, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

/*On click*/
.menu:checked .menu-cirkel {
  border-color: #D34237;
}
.menu:checked ~ .menu-cirkel .menu-streep {
  background-color: transparent;
}
.menu:checked ~ .menu-cirkel .menu-streep:before {
  transform: translateX(-50%) rotate(45deg);
  -webkit-transform: translatex(-50%) rotate(45deg);
}
.menu:checked ~ .menu-cirkel .menu-streep:after {
  transform: translateX(-50%) translateY(-10px);
  rotate(-45deg);

-webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
  top: 10px;
}
/*drawer slide down animatie*/
.drawer {
  z-index: 3;
  transition-duration: 500ms;
  background: #70C26F;
}
.drawer {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, -100%, 0);
}
.menu:checked ~ .drawer {
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
}

div {
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
  margin: 0;
  width: 100%:
}
li {
  background: #70C26F;
  list-style-type: none;
}
li:hover {
  background: #0AFA76;
  opacity: 0.4; filter: alpha(opacity=4);
}

/*Tabs*/
.tabs {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  text-align: center;
}
.tab {
  display: inline-block;
  position: relative;
  border-radius: 4px;
  margin: 10px;
  overflow: hidden;
  text-align: center;
  width: 20%;
  height: 50px;
  line-height: 48px;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.tab:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#tab1 {
  background-color: #F4DB33;
}
#tab2 {
  background-color: #962FF8;
}
#tab3 {
  background-color: #DC3C84;
}

/*Cards*/
.cards {
  position: relative;
  top: 150px;
  left: 60px;
  height: 300px;
  width: 80%;
  border-radius: 4px;
  text-align: start;
  overflow: hidden;
  background: #FFF;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.content-left {
  float: left;
  width: 22%;
  height: 300px;
  padding: 15px;
  text-align: center;
}
.content-right {
  padding-top: 15px;
  padding-left: 15px;
  float: right;
  width: 60%;
  height: 300px;
}
.x-icon {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: 10px;
  font-size: 2.5em;
  background-color: #70C26F;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
}
.x-icon:hover {
  box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
#card1 .content-left {
  background-color: #F4DB33;
}
#card2 .content-left {
  background-color: #972FF8;
}
#card3 .content-left {
  background-color: #DC3C84;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Material Design</title>
    <link rel="stylesheet" href="materials.css">
</head>

<body>
    <div class="header">
        <input type="checkbox" id="menu" class="menu">
        <label class="menu-cirkel" for="menu">
            <span class="menu-streep"></span>
        </label>
        <nav class="drawer">
            <ul>
                <li>Card 1</li>
                <li>Card 2</li>
                <li>Card 3</li>
            </ul>
        </nav>
    </div>
    <div class="tabs">
        <div class="tab" id="tab1" onclick="document.getElementById('card1').style.display='block';
				document.getElementById('card2').style.display='none';
				document.getElementById('card3').style.display='none';">
            Tab 1
        </div>
        <div class="tab" id="tab2" onclick="document.getElementById('card1').style.display='none';
				document.getElementById('card2').style.display='block';
				document.getElementById('card3').style.display='none';">
            Tab 2
        </div>
        <div class="tab" id="tab3" onclick="document.getElementById('card1').style.display='none';
				document.getElementById('card2').style.display='none';
				document.getElementById('card3').style.display='block';">
            Tab 3
        </div>
    </div>
    <div class="cards" id="card1" style="display: none;">
        <div class="content-left">
            Card 1
            <div class="x-icon" onclick="document.getElementById('card1').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 1 </div>
    </div>
    <div class="cards" id="card2" style="display: none;">
        <div class="content-left">
            Card 2
            <div class="x-icon" onclick="document.getElementById('card2').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 2 </div>
    </div>
    <div class="cards" id="card3" style="display: none;">
        <div class="content-left">
            Card 3
            <div class="x-icon" onclick="document.getElementById('card3').style.display='none';">
                x
            </div>
        </div>
        <div class="content-right">Content 3</div>
    </div>
</body>
</html>