简单的CSS DIV标签图像更改

时间：2015-12-03 18:56:57

标签： javascript html

我在这里遇到了一个非常愚蠢的问题。我确定我错过了一些简单的东西，或者忽略了一些东西。

我有一组标签，我想在每次点击新标签链接时更改背景图片。只是一个简单的背景图像变化。似乎无法使document.getElementById工作。我认为我没有正确定位它。

请原谅代码的邋,,仍在组织它。没有实施JS。

任何有助于这项工作的帮助都会很棒！

＆＃13;
＆＃13; 
* {
	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;

}
＆＃13; 
	<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

我建议将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>

相关问题
最新问题