javascript - 缩放选项卡上的图像

Question

有没有办法同时在不同的选项卡中缩放图像。我试图在 tabs 上制作缩放效果。

在这里

我使用了getElementById函数。尽管使用它，我必须同时缩放所有图像。

我尝试使用getElementsByClassName但它甚至无法正常工作。

有没有办法通过在单击该选项卡时将 ID 动态设置为该图片标签来应用此功能？（在这种情况下可以单独缩放）

在这里，我还尝试在缩放功能上传递 ID，但在缩放不同的选项卡BIN时也有一些错误

Answer 1

您需要将图像存储在具有不同 ID 的 div 中。每页只能有一个具有相同 ID 的元素。我会添加一个函数来确定您在哪个选项卡上，如下所示：

var currentTab = 0;
function switchTab(tabID) {
  currentTab = tabID;
  // code to load the tab's contents here
}

function zoom() {
  var img = document.getElementById("pic"+currentTab);
  // the rest of the zoom code goes here
}

<ul>
  <li onclick="switchTab(0);">Tab 1</li>
  <li onclick="switchTab(1);">Tab 2</li>
</ul>

<img id="pic0" src="firstpic.jpg" />
<img id="pic1" src="secondpic.jpg" />

如果你这样做，每个图像都应该正确缩放，因为现在只有第一个有效。只需跟上您正在使用的图像并为他们提供唯一的 ID，它应该可以正常工作。

这是我制作的演示此功能的页面的链接：http: //mdl.fm/f/zoom.html