jquery - 使用 Jquery 的选项卡样式导航栏

Question

嗨，我一直在寻找这个问题的答案。我正在尝试使用 jquery 创建一个使用翻转的导航栏。因此，三个不同的选项卡/图像有打开状态、关闭状态、单击状态。

示例:首页 |支持|关于

我遇到的问题是获取单击/打开状态以关闭其他图像/选项卡(如果它已经处于打开/单击状态)。持续发生的事情是每个选项卡在单击时保持事件状态，而不是关闭和打开。

这是代码

$(document).ready(function() {


    // Navigation rollovers
    $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);

        // don't do the rollover if state is already ON
        if (!matches) {
        imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcON);
        }

    });

        $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        matchesclk = imgsrc.match(/_clk/);


        if (!matchesclk) {
        imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcClkON);
        }

    }); 

    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });


}); 

如有任何帮助，我们将不胜感激。我是 jquery 的新手，我真的很喜欢这个。

Answer 1

尝试使用 CSS。这是一篇有关滑动门技术的文章:

http://www.alistapart.com/articles/slidingdoors/

编辑以下是应用点击状态的方法(假设您的 HTML 有效):

$(".yourLink").cick(function() {
   $(".yourLink").removeClass("selected");
   $(this).addClass("selected");
});

并且只需确保在 CSS 中定义“选定”类即可。