通过单击链接切换图像并禁用活动链接

Toggle image by clicking link and disable the active link

本文关键字：链接 活动 图像 单击      更新时间：2023-09-26

我有一个网页，里面有很多div，就像下面的一样。它使用简单的javascript通过点击两个单独的链接来切换图像。见小提琴。

HTML：

<div id="test">
   <img src="http://placehold.it/100x100" />
   <div class="caption">
      <h4>
        <a href="javascript:void(0)" onclick="toggleImg0('test')">Image1</a> 
        <a href="javascript:void(0)" onclick="toggleImg1('test')">Image2</a>
        </h4>
   </div>
</div>

JavaScript：

function toggleImg1(charName) {
   document.getElementById(charName).getElementsByTagName('img')[0].src = "http://placehold.it/150x150";
}
function toggleImg0(charName) {
   document.getElementById(charName).getElementsByTagName('img')[0].src = "http://placehold.it/100x100";
}

现在，我想禁用显示相应图像的链接（它应该像普通文本一样）。我该怎么做？

请查看此处的完整网页。

您正在使用JQuery，为什么不使用他的函数呢？给您的链接一个全局类toggle_img，然后您可以使用数据属性来定义您希望每个链接在单击时更改的src，最后定义click事件，并使用.attr（）函数更改src属性，查看下面的示例。

希望这能有所帮助。

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://placehold.it/100x100" />
  <div class="caption">
    <h4>
      <a href="javascript:void(0)" class="toggle_img" data-src='http://placehold.it/100x100'>Image1</a>
      <a href="javascript:void(0)" class="toggle_img" data-src='http://placehold.it/150x150'>Image2</a>
    </h4>
  </div>
</div>

更新

通过添加额外的css类，将活动图像的链接更改为简单文本，例如：

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));
  if (!$(this).hasClass("active"))
    $(this).addClass('active');
  $(this).siblings().removeClass('active');
})
.toggle_link {
  color: blue;
  text-decoration: underline;
  cursor: pointer
}
.active {
  color: black;
  text-decoration: none;
  cursor: default
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://placehold.it/100x100" />
  <div class="caption">
    <h4>
      <span class="active toggle_link toggle_img" data-src='http://placehold.it/100x100'>Image1</span>
      <span class="toggle_link toggle_img" data-src='http://placehold.it/150x150'>Image2</span>
    </h4>
  </div>
</div>

这里是另一个解决方案

  • 您可以创建一个onclick处理程序函数，而不是为每个锚点标记创建两个函数

    示例

    <script>
function toggleImg(charName,obj) {
    var image=document.getElementById('test').getElementsByTagName('img')[0];
    //store image1 and image2 href
    var img_source1= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7j4zeqZB4theKrjb13e8XwhXXYpumwYEzTvhYclxrSrzS_5yJ";
    var img_source2="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQwoMrE0aNNuYH5AlJ3B-4PT5UMC2fdAwS19xHVsW-rf_BI__tArA";
    if(image.src==img_source1){
        image.src=img_source2;
        //change anchor default styling for anchor press
        obj.style='pointer-events: none;color:grey';
       //enable anchor default styling for next anchor
        obj.nextElementSibling.style='pointer-events:auto'
    }
    else {
        image.src=img_source1
        obj.style=' pointer-events: none;color:grey';
        obj.previousElementSibling.style='pointer-events:auto'
    }
}
</script>

  • 为每个锚点元素添加一个id。。这是您的html的修改版本 
    <div id="test">
   <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQwoMrE0aNNuYH5AlJ3B-4PT5UMC2fdAwS19xHVsW-rf_BI__tArA" />
   <div class="caption">
      <h4>
        <a id='anchor1' href="javascript:void(0)" onclick="toggleImg('test',this)">Image1</a> 
        <a id='anchor2' href="javascript:void(0)" onclick="toggleImg('test',this)">Image2</a>
        </h4>
   </div>
</div>

    这里有一个片段

    <script>
function toggleImg(charName,obj) {
	var image=document.getElementById('test').getElementsByTagName('img')[0];
	var img_source1= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7j4zeqZB4theKrjb13e8XwhXXYpumwYEzTvhYclxrSrzS_5yJ";
	var img_source2="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQwoMrE0aNNuYH5AlJ3B-4PT5UMC2fdAwS19xHVsW-rf_BI__tArA";
	if(image.src==img_source1){
		image.src=img_source2;
		obj.style='pointer-events: none;color:grey';
		obj.nextElementSibling.style='pointer-events:auto'
	}
	else {
		image.src=img_source1
		obj.style=' pointer-events: none;color:grey';
		obj.previousElementSibling.style='pointer-events:auto'
	}
}
</script>
<div id="test">
   <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQwoMrE0aNNuYH5AlJ3B-4PT5UMC2fdAwS19xHVsW-rf_BI__tArA" />
   <div class="caption">
      <h4>
        <a id='anchor1' href="javascript:void(0)" onclick="toggleImg('test',this)">Image1</a> 
        <a id='anchor2' href="javascript:void(0)" onclick="toggleImg('test',this)">Image2</a>
		</h4>
   </div>
</div>

    • JavaScript：

        <script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
  </script>

    HTML

        <a href="#" class="bold" onclick="toggle_visibility('caption');">SHOW/HIDE Images</a>
    <div id="caption">Put your images in here and stuff</div>

    div将在页面加载时隐藏，单击SHOW/HIDE Images文本将切换可见性。

    我想这就是你想要的…：）

    相关文章：