1

我正在为我的 JavaScript 类开发一个项目，但我不知道如何编辑这个 jQuery，当你选择一个选项卡时，它会带你进入一个新页面。我尝试在正文中添加“a href”，但它看起来不正确。是否有一段代码我必须在 jQuery 中输入，所以当您选择“关于”时，它会将您带到实际页面？这是代码：

jQuery

function handleEvent(e) {
    var el = $(e.target);
    if (e.type == "mouseover" || e.type == "mouseout") {
        if (el.hasClass("tabStrip-tab") && !el.hasClass("tabStrip-tab-click")) {
            el.toggleClass("tabStrip-tab-hover");
        }
    }
    if (e.type == "click") {
        if (el.hasClass("tabStrip-tab-hover")) {
            var id = e.target.id;
            var num = id.substr(id.lastIndexOf("-") + 1);

            if (currentNum != num) {
                deactivateTab();
                el.toggleClass("tabStrip-tab-hover")
                    .toggleClass("tabStrip-tab-click");
                showDescription(num);
                currentNum = num;
            }
        }
    }
}

function deactivateTab() {
    var descEl = $("#tabStrip-desc-" + currentNum);
    if (descEl.length > 0) {
        descEl.remove();
        $("#tabStrip-tab-" + currentNum).toggleClass("tabStrip-tab-click");
    }
}

$(document).bind("click mouseover mouseout", handleEvent);

HTML

<div class="tabStrip">
    <div id="tabStrip-tab-1" class="tabStrip-tab">Home</div>
    <div id="tabStrip-tab-2" class="tabStrip-tab">About</div> 
    <div id="tabStrip-tab-3" class="tabStrip-tab">Contact</div>
    <div id="tabStrip-tab-3" class="tabStrip-tab">Gallery</div>
</div>
4

2 回答 2

1

如果您需要新页面，请将其添加到您的处理程序..

window.open('url', 'window name', 'window settings');

或者如果你想重定向实际视图

window.location.href('url');

此外，这应该是一个更好的选择：

$('div[id^=tabStrip-tab]').bind("click mouseover mouseout", handleEvent);

现在只有 'tabStrip-*' id 会触发事件/处理程序

于 2013-10-19T18:21:13.950 回答
0

您的问题的最佳解决方案是为您拥有的每个选项卡放置隐藏的 div 内容。您所要做的就是根据选择的标签显示当前的 div。另一种解决方案是使用 ajax，然后你有一个内容模板，你用你收到的数据填充模板。

于 2013-10-19T18:20:30.543 回答