JS：导航条图片切换有关问题-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20442 次

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="功能 Function" /></a></li>

	<li id="nav2"><a href="../feature/index.php"><img src="../common/images/nav02_off.gif" width="90" height="75" alt="特征 Feature" /></a></li>

	<li id="nav3"><a href="../casestudy/index.php"><img src="../common/images/nav03_off.gif" width="150" height="75" alt="导入实例 Track record" /></a></li>

	<li id="nav4"><a href="../price/index.php"><img src="../common/images/nav04_off.gif" width="90" height="75" alt="价格 Price" /></a></li>

	<li id="nav5"><a href="../introduct/index.php"><img src="../common/images/nav05_off.gif" width="134" height="75" alt="关于导入 Introduction" /></a></li>

	<li id="nav6"><a href="../qanda/index.php"><img src="../common/images/nav06_off.gif" width="90" height="75" alt="Q＆A" /></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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>