Javascript 在选项卡上缩放图像

是否有一种方法可以同时在不同的选项卡中缩放图像。我试着在标签上做缩放效果

在

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

我尝试使用getElementsByClassName，但它甚至不起作用

有没有一种方法可以通过在点击该标签的同时动态设置该pic标签的ID来应用该方法？（在本例中可以单独缩放）

---

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

您需要将图像存储在具有不同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" />

var currentTab=0；
功能切换选项卡（选项卡ID）{
currentTab=tabID；
//在此处加载选项卡内容的代码
}
函数zoom（）{
var img=document.getElementById（“pic”+currentTab）；
//其余的缩放代码在这里
}

选项卡1
选项卡2

如果这样做的话，每个图像都应该正确缩放，因为现在只有第一个图像可以工作。只要跟上你在哪个图像上，给他们唯一的ID，就可以了

下面是我制作的一个页面的链接，该页面演示了此功能：