2

我已将导航放在头文件中，我正在使用 j 查询来显示所选页面。当我使用$(document).ready(function()我的链接不起作用。当我在没有这个的情况下使用我的功能时，我的功能不起作用。

// js code
$(document).ready(function(){
    $("li a").click(function() {
        var p = $(this).parents("ul");
        $("li", p).removeClass("subtab-selected").addClass("subtab-notselected");
        $(this).parent().addClass("subtab-selected");
        return false;
    });
});

HTML

<div id="navigation">
    <ul>
        <li class="subtab-selected"><a href="index.jsp">Home</a></li>
        <li class="subtab-notselected"><a href="About.jsp">About Me</a></li>
        <li class="subtab-notselected"><a href="#">Shows</a></li>
        <li class="subtab-notselected"><a href="#">Video Gallery</a></li>
        <li class="subtab-notselected"><a href="PictureGallery.jsp">Picture Gallery</a></li>
        <li class="subtab-notselected"><a href="#">News</a></li>
        <li class="subtab-notselected"><a href="#">Contact</a></li>
    </ul>
</div>

CSS

li.subtab-selected {
    background:black;
width:134px;
    font-weight:bold;
color:#fff;
text-shadow:none;
    }
4

3 回答 3

1

我认为您的问题是，当您不使用该ready函数时，该代码从未运行过，因此链接工作正常，现在您已经添加了ready该函数被调用并返回的函数，false这将阻止链接工作。所以我建议你删除它。像这样。

$(document).ready(function(){
    $("li a").click(function() {
        var p = $(this).parents("ul");
        $("li", p).removeClass("subtab-selected").addClass("subtab-notselected");
        $(this).parent().addClass("subtab-selected");
        // return false;
    });
});

虽然这对我来说仍然没有意义......

在这里，我假设Links don't work意味着您的链接没有将您带到您不想去的地方，如果不是这种情况，您需要定义links don't work。

于 2013-08-28T18:47:24.210 回答
0

如果您正在动态构建页面/添加链接，则需要在添加新链接时绑定它们，或者更好地使用事件委托来监听事件：

$(document).ready(function(){
  $('body').on("click","li a").on('click',function() {
    var p = $(this).parents("ul");
    $("li", p).removeClass("subtab-selected").addClass("subtab-notselected");
    $(this).parent().addClass("subtab-selected");
    return false;
  });
});

如果您希望某些链接导航到新页面，而其他链接则停留在当前页面上，您需要检查单击的内容并根据您想要的行为返回 true/false：

$(document).ready(function(){
    $("li a").click(function() {
        var p = $(this).parents("ul");

        alert($(this).attr('href'));

        // Early return true to let default navigation take place
        if($(this).attr('href') !== '#') return true;

        // Otherwise, user clicked # url        
        $("li", p).removeClass("subtab-selected").addClass("subtab-notselected");
        $(this).parent().addClass("subtab-selected");

        return false;
    });
});

演示

从下面的评论更新

操作：

我只是想将 index.jsp 重定向到 About.jsp 和 jquery 通过在 about.jsp 打开时更改 about.jsp 背景颜色来显示

建议的方法：

然后您需要让 About.jsp 呈现页面并选择其选项卡。您可以在 About.jsp 中执行该服务器端，也可以传递查询参数或依赖文档位置并让脚本查找并设置选项卡样式。（如果您不喜欢其中任何一种方法，还有其他方法） 

OP 的最终解决方案是检查加载页面的路径并为正确的选项卡设置适当的样式。

于 2013-08-28T18:36:45.170 回答
0

如果您的链接是在加载文档后动态添加的，请尝试此操作

   $(document).ready(function(){
      $("li a").on('click',function() {
        var p = $(this).parents("ul");
        $("li", p).removeClass("subtab-selected").addClass("subtab-notselected");
        $(this).parent().addClass("subtab-selected");
        return false;
      });
    });
于 2013-08-28T18:28:17.770 回答