Question

我有一个网页，其中有许多div，如下所示。它使用简单的JavaScript来点击两个单独的链接来切换图像。 See fiddle

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";
}

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

查看完整的网页here。

Answer 1

您正在使用JQuery，为什么不使用他的功能，为您的链接提供全局类toggle_img，然后您可以使用 data attributes 来定义{{1您希望每个链接在点击时更改，最后定义src事件并使用 .attr() 功能更改click属性，查看示例波纹管。

希望这有帮助。

＆＃13;

src

＆＃13;

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));
})

＆＃13;

<强>更新

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

＆＃13;

<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>

＆＃13;

$('body').on('click', '.toggle_img', function() {
  $('img').attr('src', $(this).data('src'));

  if (!$(this).hasClass("active"))
    $(this).addClass('active');

  $(this).siblings().removeClass('active');
})

＆＃13;

.toggle_link {
  color: blue;
  text-decoration: underline;
  cursor: pointer
}

.active {
  color: black;
  text-decoration: none;
  cursor: default
}

＆＃13;

Answer 2

这是另一种解决方案

您可以创建一个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>

这是一个片段

＆＃13;

<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>

＆＃13;

Answer 3

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文本将切换可见性。

我认为这就是你所追求的......：）

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

3 个答案: