根据给定的文件信息，我们需要详细说明关于使用Jquery为当前页或跳转后页面的导航栏添加选中状态样式的技术知识点。
知识点详细说明：
一、Jquery的基本概念：
Jquery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得Web开发更加容易。它旨在改变开发者编写JavaScript代码的方式，使得代码更加简洁、易读和易于编写。
二、导航栏样式的添加方法：
在这个实例中，我们涉及到两种方法来为导航栏添加选中状态样式，一种是在页面刷新或跳转时临时添加样式，另一种是在页面刷新或跳转后仍能保持选中状态的样式。
1. 第一种情况：临时样式添加
在页面加载完成后，通过Jquery遍历导航栏内的每个链接项（li元素），为它们绑定点击事件。当点击任何一个导航链接项时，移除所有链接项的“hover”类样式，并为当前点击的链接项添加“hover”类样式。同时，为了防止页面默认的跳转行为，使用return false语句。
```javascript
<script type="text/javascript" src="templets/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nava").each(function(){
$(this).click(function(){
$(".nav.hover").removeClass("hover");
$(this).addClass("hover");
return false; //防止页面跳转
});
});
});
</script>
<div class="nav">
<ul>
<li><a href="1.html" class="hover">首页</a></li>
<li><a href="2.html">个人资料</a></li>
<li><a href="3.html">我的好友</a></li>
<li><a href="4.html">消息管理</a></li>
</ul>
</div>
```
2. 第二种情况：保持刷新或跳转后的样式
在页面加载完成后，通过Jquery遍历导航栏内的每个链接项，并判断当前页面的URL是否与链接项的href属性值相匹配。若匹配，则为该链接项添加“hover”类样式，以此来实现导航栏的选中状态。
```javascript
<script type="text/javascript" src="templets/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nava").each(function(){
$this = $(this);
if($this[0].href == String(window.location)){
$this.addClass("hover");
}
});
});
</script>
<div class="nav">
<ul>
<li><a href="1.html">首页</a></li>
<li><a href="2.html">个人资料</a></li>
<li><a href="3.html">我的好友</a></li>
<li><a href="4.html">消息管理</a></li>
</ul>
</div>
```
三、HTML与CSS的相关应用：
在这个示例中，我们可以看到HTML被用来构建页面的结构，而CSS则用来定义样式。例如，使用“hover”类来定义选中状态下导航项的样式。在实际应用中，可以使用CSS的伪类:hover来定义鼠标悬停时的样式，或使用类（class）来定义特定状态下的样式。
四、Jquery选择器的使用：
在Jquery脚本中，我们使用了多种选择器来定位DOM元素。例如，“.nava”选择器用于选取所有类名为“nava”的元素。另外，使用属性选择器“[href]”来选择具有href属性的元素，以及使用“[0].href”来获取元素的href属性值，这些都是在Jquery中常用的选择器。
总结：
通过Jquery，可以非常方便地为导航栏添加交互式的选中状态样式。这不仅提高了用户体验，也让网页的导航系统更为直观。在实现时，重要的是掌握Jquery事件处理、遍历元素和动态添加样式的方法。同时，合理地运用HTML与CSS来定义页面的结构和样式也是确保前端效果能够实现的关键。通过综合运用这些技术，可以创建出既美观又功能强大的Web界面。
