通过标签html中的照片列表更改
Change through list of photos in tab html
嗨，我正试图用HTML, CSS和Javascript为我的网站编码，我不习惯这些语言。
我有"标签"，是由css作为ul在html中创建的，我想把图片与Javascript链接的图像作为onclick，这样我就可以改变通过我点击他们的照片。
代码如下:
脚本函数
<script>
function changeImage(){
var image = document.getElementById('myImage');
if(image.src.match("img/test/image1.jpg")){
image.src = "img/test/image2.jpg";
}
else if(image.src.match("img/test/image2.jpg")){
image.src = "img/test/image3.jpg";
}
else if(image.src.match("img/test/image3.jpg")){
image.src = "img/test/image4.jpg";
}
else if(image.src.match("img/test/image4.jpg")){
image.src = "img/test/image5.jpg";
}
else if(image.src.match("img/test/image5.jpg")){
image.src = "img/test/image1.jpg";
}
}
</script>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Kitchenette</a></li>
<li><a href="#tab2">Double Queen</a></li>
<li><a href="#tab3">Single Queen</a></li>
<li><a href="#tab4">Standard Room</a></li>
<li><a href="#tab5">Partial View Room</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<table style="width:100%">
<tr>
<td>
<img src="img/test/image1.jpg" id="myImage" width="550" height="300" alt="Room Image" onclick="changeImage()" />
</td>
</tr>
<tr>
<td>
<p> Description of the room should be in here. </p>
</td>
</tr>
</table>
</div>
<div id="tab2" class="tab">
<table style="width:100%">
<tr>
<td>
<img src="img/test/second/image1.jpg" id="myImage" width="550" height="300" alt="Room Image" onclick="changeImage2()" />
</td>
</tr>
<tr>
<td>
<p> Description of the room should be in here. </p>
</td>
</tr>
</table>
</div>
/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 2px;
float:left;
list-style:none;
}
.tab-links a {
/*padding:5px 5px;*/
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:14px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
/*padding:15px;*/
border-radius:4px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
我遇到的问题是第一个选项卡工作得很好但是如果我转到第二个选项卡照片不会改变但是第一个选项卡的照片会改变
所以我认为onclick读取第二个选项卡的点击并将其应用于第一个选项卡但我不确定这个。
请帮帮我…我被困住了
将您的图像放在选项卡中，并将脚本更改为如下所示:
$(document).ready(function() {
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Kitchenette</a></li>
<li><a href="#tab2">Double Queen</a></li>
<li><a href="#tab3">Single Queen</a></li>
<li><a href="#tab4">Standard Room</a></li>
<li><a href="#tab5">Partial View Room</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<img src="/path/to/img1.jpg" alt="Kitchenette" />
<p>Description</p>
</div>
<div id="tab2" class="tab">
<img src="/path/to/img2.jpg" alt="Double Queen" />
<p>Description</p>
</div>
<div id="tab3" class="tab">
<img src="/path/to/img3.jpg" alt="Single Queen" />
<p>Description</p>
</div>
<div id="tab4" class="tab">
<img src="/path/to/img4.jpg" alt="Standard Room" />
<p>Description</p>
</div>
<div id="tab5" class="tab">
<img src="/path/to/img5.jpg" alt="Partial View Room" />
<p>Description</p>
</div>
</div>
</div>读取元素标识符:id和class属性，对id和class有一个了解。
正如它所说，
此名称在文档中必须是唯一的。
你不能让多个元素共享一个id。如果这样做，getElementById可能只得到第一个元素。
解决这个问题的方法之一是:为每个id使用不同的id(例如:myImageTab1 myImageTab2)。如果你想修改样式，可以给所有的图像元素添加一个类。
你不需要javascript，你可以用一个简单的css鼠标悬停。
#tabs {
border: 1px solid #DEDEDE;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
height: 365px;
position: relative;
overflow: hidden;
}
.tabs-content {
padding: 25px;
width: 100%;
height: 300px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.tabs {
overflow: hidden;
background: #e1e1e1;
background: -moz-linear-gradient(center top, #f2f2f2, #e1e1e1);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(100%, #e1e1e1));
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-box-shadow: 0 1px 0 #FFF inset;
-moz-box-shadow: 0 1px 0 #FFF inset;
box-shadow: 0 1px 0 #FFF inset;
}
.tabs a {
display: block;
float: left;
font: 15px/35px Arial, Helvetica, Sans-serif;
padding: 0 20px 0 40px;
color: #999;
text-shadow: 0 1px 0 #FFF;
border-left: solid 1px rgba(0, 0, 0, 0.05);
border-right: solid 1px rgba(255, 255, 255, 0.7);
position: relative;
overflow: hidden;
}
.tabs a:after {
content: '✔';
position: absolute;
top: 0px;
left: 10px;
line-height: 21px;
font-size: 10px;
width: 21px;
text-align: center;
margin: 7px 10px 5px 0;
background: #000;
font-size: 12px;
-moz-border-radius: 21px;
-webkit-border-radius: 21px;
border-radius: 21px;
background: #bdbdbd;
background: -moz-linear-gradient(center top, #d4d4d4, #bdbdbd);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d4d4), color-stop(100%, #bdbdbd));
-webkit-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0, 0, 0, 0.25) inset;
-moz-box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0, 0, 0, 0.25) inset;
box-shadow: 0 1px 0 0 #FFF, 0 1px 0 0 rgba(0, 0, 0, 0.25) inset;
text-shadow: 0 1px 0 #999;
color: #ffffff;
}
.tabs a:hover {
background: #FFF;
border-left-color: #CCC;
}
.tabs a:hover:after {
background: #038bd5;
background: -moz-linear-gradient(center top, #2dc3fc, #038bd5);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2dc3fc), color-stop(100%, #038bd5));
text-shadow: 0 1px 0 #096c9e;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0, 148, 255, 0.85);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0, 148, 255, 0.85);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.45), 0 1px 0 0 rgba(0, 0, 0, 0.25) inset, 0 0 5px 0 rgba(0, 148, 255, 0.85)
}
.tabs a:hover + .tabs-content {
display: block;
}
.tabs a:first-child {
border-left-width: 0;
display: block;
}
.tabs a:last-child {
border-right-width: 0;
}
.tabs-content:hover {
display: block;
}
img{width:550px;
height:300px;}<div id="content" role="main">
<div id="tabs">
<nav class="tabs">
<a href="#">Kitchenette</a>
<section class="tabs-content">
<img src="http://www.rachelgallen.com/images/daisies.jpg" onmouseover="this.src='http://www.rachelgallen.com/images/snowdrops.jpg'" onmouseout="this.src='http://www.rachelgallen.com/images/daisies.jpg';" </img>
</section>
<a href="#">Double Queen</a>
<section class="tabs-content">
<img src="
http://www.rachelgallen.com/images/snowdrops.jpg" onmouseover="this.src='http://www.rachelgallen.com/images/yellowflowers.jpg';" onmouseout="this.src='http://www.rachelgallen.com/images/snowdrops.jpg';" </img>
</section>
<a href="#">Single Queen</a>
<section class="tabs-content">
<img src="
http://www.rachelgallen.com/images/mountains.jpg" onmouseover="this.src='http://www.rachelgallen.com/images/purpleflowers.jpg';" onmouseout="this.src='http://www.rachelgallen.com/images/mountains.jpg';" </img>
</section>
<a href="#">Full View</a>
<section class="tabs-content">
<img src="
http://www.rachelgallen.com/images/trees.jpg" onmouseover="this.src='http://www.rachelgallen.com/images/daisies.jpg';" onmouseout="this.src='http://www.rachelgallen.com/images/trees.jpg';" </img>
</section><a href="#">Partial View</a>
<section class="tabs-content">
<img src="
http://www.rachelgallen.com/images/autumntrees.jpg" onmouseover="this.src='http://www.rachelgallen.com/images/trees.jpg';" onmouseout="this.src='http://www.rachelgallen.com/images/autumntrees.jpg';" </img>
</section>
</nav>
</div>
</div>您可以使用几行j查询来完成此操作。
$('#list1 li').click(function() {
var j = $(this).data("type");
$('#myimg').attr('src', j);
});li {
display: inline;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
<li data-type="https://cdn.sstatic.net/stackoverflow/img/logo-10m.svg?v=fc0904eba1b1">Image 1</li>
<li data-type="https://www.google.co.in/images/srpr/logo11w.png">Image 2</li>
<li data-type="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg">Image 2</li>
</ul>
<div class="imagecontainer">
<img id="myimg" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="" />
</div>相关文章：
- 要求输入在数据列表中
- 从javascript创建一个列表
- 如何使用jQuery选择下拉列表的值
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection）
- Javascript按钮下拉列表
- 漂亮照片图片库中的Facebook赞按钮
- 图片照片库
- 如何使用json将对象列表从java转换为javascript
- 区分JSON中的矩阵和列表列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 接受不在列表中的值-引导组合框
- 禁用jQuery中的下拉列表
- 从HTTPGET返回一个自定义对象列表，以便在Angular 2应用程序中使用
- 调用照片在图像列表上滑动的简单方法
- 带阴影盒的照片库的列表/网格切换
- 通过标签html中的照片列表更改
- 在列表中上载照片
- 使用下拉列表动态更改照片
