Jquery 突出显示导航栏的所选选项，其中每个选项都会转到新页面

我只想突出显示导航栏中单击的选项，其中每个选项都链接到新页面

 <div class="blue_grad">
                <ul id="nav_bar" class="tabNavigation">          
                    <li><a href="/xyz">A</a></li>
                    <li><a href="/xdz">B</a></li>
                    <li><a href="/ycz">E</a></li>
                    <li><a href="/xwz">S</a></li>
                    <li><a href="/xqz">E</a></li>

                </ul>
    </div>

我用过这样的东西。。。但它不起作用

<script type="text/javascript">
 $(document).ready(function(){
  $("#nav_bar li").click(function(){
    $("#nav_bar li").removeClass("selected");
    $(this).addClass("selected");
 });
});
</script>

---

任何帮助

一个快速的JSFIDLE解决方案：

似乎可以在JSFIDLE上使用。当然，如果你重定向，你将看不到效果。因此，我增加了e；是否希望页面重新加载并在新页面上应用类？当我单击链接时，它会将我指向新页面，我希望看到新页面上的效果。。。希望我是清白的，如果你有一个静态的HTML页面，每个导航链接，然后把选择的类在相应的导航项目。如果页面是动态生成的，那么使用一些模板逻辑将类应用于正确的项。如果您让我们知道您使用的是哪种模板/脚本语言，如果需要，我们可以在这方面给您一些帮助。。。。以前我在每个模板上都有这个导航条，但现在我把它移到了基本模板上，以使代码更干净……Tim的prevent default比我的js fiddle中的return false优雅得多。好吧，那么你想在新页面上应用这个类吗？那么我就不会用js来做这件事了。您使用什么来构建HTML模板？PHP？好的，很好。这里已经有一些答案可以帮助你。请参阅此链接以获取一些答案：