JS：导航条图片切换有关问题

2013-12-20

JS：导航条图片切换问题html页面script typetext/javascript src../common/js/jquery.js/script

JS：导航条图片切换问题
html页面


<script type="text/javascript" src="../common/js/jquery.js"></script>
<script type="text/javascript" src="../common/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../common/js/common.js"></script>
<body class="nav1">
<div id="nav">
<ul class="over">
<li id="nav1"><a href="../function/index.php"><img src="../common/images/nav01_off.gif" width="92" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
<li id="nav2"><a href="../feature/index.php"><img src="../common/images/nav02_off.gif" width="90" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
<li id="nav3"><a href="../casestudy/index.php"><img src="../common/images/nav03_off.gif" width="150" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
<li id="nav4"><a href="../price/index.php"><img src="../common/images/nav04_off.gif" width="90" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
<li id="nav5"><a href="../introduct/index.php"><img src="../common/images/nav05_off.gif" width="134" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
<li id="nav6"><a href="../qanda/index.php"><img src="../common/images/nav06_off.gif" width="90" height="75" alt="JS：导航条图片切换有关问题" /></a></li>
</ul>
</div>
</body>

js代码


$(function(){
if( $('body:eq(0)').attr('class').match(/(nav\d)/) ){
$('li#'+RegExp.$1).find('img').attr('src', function(){return this.src.replace('_off','_on')});
}
}

我想通过jquery实现点击导航图片后，切换到点击后的图片。
原来的html可以实现，在我把header，导航条，footer改成独立的文件后，
通过php require_once后，只有第一个始终是on的图片。
以为是class="nav1"的原因，可改成class="nav_top"后，之后的js也不执行了。
不知是何原因。

[解决办法]
你include进来后路径是相对这个页面的上一级目录中加载js，如果目录很深路径就出错了

使用绝对路径，从根目录下开始，这样就不用考虑目录所处路径了，链接的也要注意修改

<script type="text/javascript" src="/common/js/jquery.js"></script>
<script type="text/javascript" src="/common/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/common/js/common.js"></script>

热点排行

JavaScript

JS：导航条图片切换有关问题