Question

我正在尝试创建一个简单的摄影网站。我想创建一个链接菜单，它将改变DIV中的主要IMG。我的想法是使用<UL><LI>的基本CSS菜单样式，并使用调用JS函数的<LI>项来更改HTML或图像本身。

我现在在埃及有一个可怕的互联网连接，而且我很难在网上找到以前的教程，所以我需要帮助学习哪些教程要寻找。

这项工作的最佳方式是什么？

感谢您的帮助！

Answer 1

你可以在listitem的“data-src”属性中隐藏图像的src，并在每次单击时更改“main”图像的src。示例代码：

<img id="imgToChange" src="BlahBlahBlah.jpg"/>

<ul>
    <li class="ImageChanger" data-src="~/RelativePath/AnotherImage.jpg">Click me!</li>
</ul>

jquery（如果需要，可以修改常规javascript）：

$(document).ready(function(e){
    $(".ImageChanger").on("click", function(){
        $("#imgToChange").prop("src", $(this).data("src"));
    });
});

Answer 2

如果使用图像名称的id设置每个'a'元素，则可以使用此id设置主DIV元素的图像URL。

我首先在'a'元素上使用.click函数。我使用event.target.id从'a'元素中检索id。我用#img抓住主DIV。我使用.css来设置背景图像，使用id来设置网址。

(document).ready(function(){
  $('a').click(function(event){
    var id = (event.target.id);
    $('#img').css("background-image", 'url(' + id + '.png)');
  })
}

#img{
  width:100px;
  height:100px;
  background-color: grey;
}

<html>
	<head>

		<link rel="stylesheet" href="style.css">
		
	</head>
	<body>
		
		<div id="img">
		
		</div>

		<ul>
			<l><i></i><a href="#" id="img-1">Image 1</a></l>
			<l><i></i><a href="#" id="img-2">Image 2</a></l>
			<l><i></i><a href="#" id="img-3">Image 3</a></l>
		</ul>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="script.js"></script>


	</body>
</html>

如何使用带有JS的HTML锚标签来更改DIV中的IMG？

2 个答案: