2

嗨，我一直在努力寻找这个问题的答案。我正在尝试使用使用翻转的 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 的新手，我真的很喜欢这个。

4

3 回答 3

1

改用 CSS。这是一篇关于滑动门技术的文章：

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

编辑以下是应用点击状态的方法（假设您的 HTML 有效）：

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

只需确保在 CSS 中定义“选定”类。

于 2009-07-30T19:24:16.480 回答
0

结合使用背景图像 + CSS 来显示选项卡的外观（如上所述），我建议您使用类来表示不同的链接状态，然后从那里调整您的 CSS。例如：

<div id="nav">
  <a class="on" href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
</div>

<style type="text/css">
  #nav a { color: blue; }
  #nav a.on { color: red; }
  #nav a.current { color: green; }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#nav a').hover(
            function(){ $(this).addClass('on'); },
            function(){ $(this).removeClass('on'); }
        );
    });
</script>

等等。

于 2009-07-30T19:31:32.377 回答
0

这对你有用吗？

<style>
    .click {
        background-image: url(images/click.png);
    }

    .over {
        background-image: url(images/over.png);
    }
</style>

<script>
    $(document).ready(function () {
        $("#nav a").mouseover(function () {
            if ($(this).attr("class") != "click")
                $(this).addClass("over");
        });

        $("#nav a").click(function () {
            $("#nav a.click").removeClass("click");
            $(this).addClass("click");
        });

        $("#nav a").mouseout(function () {
            $(this).removeClass("over");
        });
    });
</script>

<div id="nav">
    <a>One</a>
    <a>Tw0</a>
    <a>Three</a>
</div>
于 2009-07-30T19:47:28.490 回答