简单的CSS DIV选项卡图像更改
Simple CSS DIV Tab image change
我遇到了一个非常愚蠢的问题。我确信我错过了一些简单的东西，或者忽略了一些东西。
我有一组选项卡，每次单击新的选项卡链接时，我都想更改背景图像。只是简单的背景图像更改。似乎无法使文档.getElementById正常工作。我认为我没有正确地瞄准它。
原谅代码的草率，仍然组织它。没有实现JS。
任何帮助都将是伟大的！
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
a {
color: #fff;
text-decoration: none;
}
/*header {
color: #yellow;
text-align: center;
min-height: 140px;
margin-bottom: 60px;
}*/
header h1{
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a{
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color:red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255,255,255,.1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1, #tab-1 + span {
left: 0;
}
#tab-2, #tab-2 + span {
left: 20%;
}
#tab-3, #tab-3 + span {
left: 40%;
}
#tab-4, #tab-4 + span {
left: 60%;
}
#tab-5, #tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display:block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float:left;
width:50%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float:left;
width:40%;
height:317px;
display:block;
background-color:#FFF;
background: rgb(204, 204, 204); /* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong, .box40-2 strong {
font-weight:bolder;
font-size: 26px;
}
.box60-1 p, .box40-2 p {
text-align:center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image:url(picture-1.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image:url(picture-2.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image:url(picture-3.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic4 {
background-image:url(picture-4.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic5 {
background-image:url(picture-5.jpg);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
} <div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked">
<span><a href="#none" onclick="document.getElementById('tab-content').className='pic1'">Call Center</a></span>
<input type="radio" id="tab-2" name="tab-effect-1">
<span><a href="#none" onclick="document.getElementById('tab-content').className='pic2'">Self-Service</a></span>
<input type="radio" id="tab-3" name="tab-effect-1">
<span><a href="#none" onclick="document.getElementById('tab-content').className='pic3'">Customer Outreach</a></span>
<input type="radio" id="tab-4" name="tab-effect-1">
<span><a href="#none" onclick="document.getElementById('tab-content').className='pic4'">Workforce Optimization</a></span>
<input type="radio" id="tab-5" name="tab-effect-1">
<span style="line-height:20px; padding-top:10px;"><a href="#none" onclick="document.getElementById('tab-content').className='pic5'">Cloud Infrastructure<br>and Platforms</a></span>
<!-- tab-content -->
<div id="tab-content" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div> 我建议从锚标记中去掉onclick（它没有被读取，因为你实际点击的是更改输入中的选项卡），并在输入本身中放置onchange。您还将更改每个类的类名以读取选项卡内容pic1、选项卡内容pic2等，否则选项卡内容类将被完全替换。
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
outline: none;
font-weight: normal;
}
body {
background: #3498DB;
}
input {
z-index: -1;
}
a {
color: #fff;
text-decoration: none;
}
header h1 {
margin-top: 100px;
font-size: 50px;
margin-bottom: 20px;
font-weight: 100;
}
header a {
font-size: 18px;
margin-left: 20px;
}
.copyright {
font-size: 25px;
font-weight: 100;
color: #fff;
text-align: center;
margin-top: 100px;
}
/* Tabs Start */
.ease {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.tabs {
background-color: red;
position: relative;
margin-bottom: 50px;
}
.tabs > input,
.tabs > span {
width: 20%;
height: 60px;
line-height: 60px;
position: absolute;
top: 0;
}
.tabs > input {
cursor: pointer;
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 99;
}
.tabs > span {
background: #deeab4;
text-align: center;
overflow: hidden;
}
.tabs > span i,
.tabs > span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.tabs > input:hover + span {
background: rgba(255, 255, 255, .1);
}
.tabs > input:checked + span {
background: #95d600;
}
.tabs > input:checked + span,
.tabs > input:hover + span {
color: #fff;
}
#tab-1,
#tab-1 + span {
left: 0;
}
#tab-2,
#tab-2 + span {
left: 20%;
}
#tab-3,
#tab-3 + span {
left: 40%;
}
#tab-4,
#tab-4 + span {
left: 60%;
}
#tab-5,
#tab-5 + span {
left: 80%;
}
/*.tab-content {
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}*/
.tab-content section {
width: 100%;
display: none;
}
.tab-content section h1 {
margin-top: 15px;
font-size: 100px;
font-weight: 100;
text-align: center;
}
#tab-1:checked ~ .tab-content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .tab-content #tab-item-2 {
display: block;
}
#tab-3:checked ~ .tab-content #tab-item-3 {
display: block;
}
#tab-4:checked ~ .tab-content #tab-item-4 {
display: block;
}
#tab-5:checked ~ .tab-content #tab-item-5 {
display: block;
}
/* effect-1 */
.effect-1 > input:checked + span {
background: #8cd600;
}
/* Boxes */
.box60-1 {
float: left;
width: 50%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box40-2 {
float: left;
width: 40%;
height: 317px;
display: block;
background-color: #FFF;
background: rgb(204, 204, 204);
/* older browsers */
background: rgba(204, 204, 204, 0.9);
}
.box60-1 strong,
.box40-2 strong {
font-weight: bolder;
font-size: 26px;
}
.box60-1 p,
.box40-2 p {
text-align: center;
font-size: 22px;
}
/* Picture Change */
.tab-content {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
}
.pic1 {
background-image: url(http://lorempixel.com/600/300/nature/1);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic2 {
background-image: url(http://lorempixel.com/600/300/nature/2);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}
.pic3 {
background-image: url(http://lorempixel.com/600/300/nature/3);
padding: 80px 20px 20px;
width: 100%;
min-height: 388px;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
}<div class="container">
<div class="tabs">
<!-- tab-title -->
<input type="radio" id="tab-1" name="tab-effect-1" checked="checked" onclick="document.getElementById('tabContent').className='pic1'">
<span><a href="#">Call Center</a></span>
<input type="radio" id="tab-2" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic2'">
<span><a href="#">Self-Service</a></span>
<input type="radio" id="tab-3" name="tab-effect-1" onclick="document.getElementById('tabContent').className='pic3'">
<span><a href="#">Customer Outreach</a></span>
<!-- tab-content -->
<div id="tabContent" class="tab-content">
<section id="tab-item-1">
<div class="box60-1">
<p><strong>blah <br>
blah blah</strong></p>
<p>hello good sir</p>
</div>
</section>
<section id="tab-item-2">
<h1>Two</h1>
</section>
<section id="tab-item-3">
<h1>Three</h1>
</section>
<section id="tab-item-4">
<h1>Four</h1>
</section>
<section id="tab-item-5">
<h1>Five</h1>
</section>
</div>
</div>
</div>相关文章：
- WordPress-禁用图像全尺寸选项
- 带有预览和删除选项的图像上传-Javascript/Jquery
- CKEditor中没有从计算机上传图像的选项
- 如何从下拉菜单选项中设置要显示的图像
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏）
- 选择选项可更改图像的不透明度
- 在屏幕上显示选择选项图像
- jQuery UI选项卡基于活动选项卡显示/隐藏图像
- 在选项卡之间切换而不重新加载图像
- 如何在加载选项卡内容时显示加载图像
- 单击图像时从数据库加载选项id
- 如何在创建选项时更改其背景图像
- 如何将此选项添加到此图像选取器项目中
- 如何在选择选项时使用 jQuery 显示不同的图像
- 禁用移动设备中的默认保存图像选项
- 如何在新选项卡中打开新创建的图像
- 使用jQuery的预览和删除选项上传多个图像
- 获取图像项计数并更新猫头鹰轮播 2 中的中心选项
- 刷新时，所有图像选项卡都会跳转并显示在页面上
- 在Javascript中启用打印背景颜色和图像选项
