1

我正在为网站的主页设置“广告牌”。广告牌将显示一个活动图像，并且右侧的缩略图将用于更改广告牌上的图像。

像这样的东西：

广告牌

目前我像这样交换图像：

        <div id="_bbImage">
        <img src="images/bill1.png" class="bbImage" id= "MainBB"/>
        </div><!--_bbImage-->

        <div id="_bbTab1" class="inactiveTab">
        <a href="images/bill2.png" onclick="swap(this); return false;">
            <img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
        </div><!--bbTab1-->

JavaScript 函数如下所示：

function swap(image){document.getElementById("MainBB").src = image.href;}

但是现在，我希望缩略图在选中或“活动”时具有不同的类以实现此效果： 在此处输入图像描述

我需要完成类切换到活动，但我还需要确保之前选择的选项卡再次设置回“非活动”类。

我试过这样的事情：

function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");

}

和：

<div id="_bbTab1" class="inactiveTab">
        <a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
            <img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
</div><!--bbTab1-->

但这似乎不起作用，当我单击缩略图时，我只是链接到显示“image/bill2.png”图像的空白页面。

有谁知道实现这一目标的好方法，或者任何人都可以指出我正确的方向。

提前致谢，

抢

4

3 回答 3

3

在我看来，你可以看看下面的 jquery 方法：

http://api.jquery.com/hover/

它具有回调函数，您可以在其中使您的内容可见/不可见。

而不是你的“inactivateTab” - 功能，你可以使用“隐藏” - 方法：

http://api.jquery.com/hide/

于 2012-11-08T15:19:23.337 回答
0

问题是您对标签内的图像使用href。标记最初是指向给定 url 的链接，将 href="xx.png" 替换为 href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"

我不明白 href 在您的代码中的原始作用是什么，但您似乎并没有使用它

于 2012-11-08T15:23:09.807 回答
0

代替img元素，使用divs 并将图像放入背景（使用background-image样式）。这允许您定义应在纯 CSS 中显示的图像。您还可以通过添加/删除类来交换图像：

.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }

至于非活动，使用这个jQuery：

$('.active').removeClass('active');

这会找到该类的所有元素active并将其关闭。现在您可以再次将其中一个设置为活动状态，上面的 CSS 将加载正确的图像。

于 2012-11-08T15:33:29.670 回答