Question

功能

用户将鼠标悬停在标签（X）上，内容div（x）现在可见。

内容div（x）保持可见，除非用户将鼠标悬停在另一个标签上，此时标签的相应div现在可见

我尝试了几个脚本，但它们与eBay不兼容，或者鼠标离开后内容仍然不可见，eBay不允许使用Jquery。

向下滚动到“设备条件”，“送货”标签。

Answer 1

我不确定你是否使用某种API来编写代码，但实现这一点真的很简单。创建一个“toggleDisplay”javascript函数，该函数获取您要显示的DOM元素的ID。然后在您的文档中，将每个选项卡的onhover事件设置为“toggleDisplay（'someID'）”，其中“someID”是您希望在用户悬停它时显示的内容div的ID。为了完成这一点，你将创建一个包含你正在用于这个小小部件的所有'内容div'的数组，并且随着时间调用'toggleDisplay'函数，它首先遍历数组并隐藏每个元素。阵列。像这样：

//First, create an array to hold all of the IDs of the divs that appear/disappear
divs = new Array();
divs.push("content1");
divs.push("content2");
//etc......

//Now that you have your ID array, you build the function that does the following:
//1) runs through that array, gets each element, and sets display:none;
//2) gets the element that was passed and sets display:block (or whatever suits)
function toggleDisplay(id){
    for(var i = 0; i < divs.length; i++){
        var item = document.getElementById(divs[i]);
        item.style.display = 'none';
    }
    //Now use the passed ID to show the div you wanted to show
    var target = document.getElementById(id);
    target.style.display = 'block';
}

//Then to use, you add this to the tabs themselves:
<div class='tab' onmouseover="toggleDisplay('content1')" >Tab content here</div>
<div class='tab' onmouseover="toggleDisplay('content2')" >Tab content here</div>
//etc......

我没有测试过这个。可能需要调整。祝你好运：）

使用eBay的JavaScript翻转标签

1 个答案: