.Net 中用于非网页的 Jquery 活动类导航链接 - AbleCommerce
我正在使用 .net 购物车 AbleCommerce 的标头组件。活动链接效果仅在标题中使用。我有一个适用于所有网页的脚本,但它无法应用于 scriptlet。前任。 “关于我们”是一个网页,脚本按预期运行。 “主页”是作为 scriptlet 存在的默认页面(不是通过管理员创建的网页),下面的脚本失败。
我尝试了 jquery 和 nvolicity 的几种不同变体(恶心!),结果与上述相同。我尝试使用完整路径 url“http://wwwpage.aspx”而不是“~/page.aspx”之类的内容。我尝试在链接本身中添加对 ID 的引用。
只有两个标题导航链接是非网页(再次在购物车管理中创建为网页),我需要让它工作。
适用于网页的脚本是:
<script type="text/javascript" src="../../../../js/jquery-1.3.2.min.js">
jQuery(function( $ ){
$('a.next').click(function(){
$('#nav_header a').removeClass('CurrentLink');
var fragment = this.getAttribute('href');
$('#nav_header a[href=' + fragment + ']').toggleClass('CurrentLink');
});
});
</script>
任何想法、想法或资源将不胜感激。我知道这可能不是理想的 .net 解决方案,该方法正是我所需要的。尝试尽快学习...
谢谢!! 朱莉
完整 HTML 代码:
<!--
<Description>
Displays the standard store header.
</Description>
-->
<table id="storeHeader" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="18"></td>
</tr>
<tr>
<td> <div style="position:relative; left:-30px;"><a href="~/Default.aspx"><img src="../../../../App_Themes/alliedHealth/images/alliedHealthBrand1.png" width="542" height="54" border="0" /></a></div>
</td>
<td><div class="alliedPhone">Call 888.818.9696</div></td>
<td align="right">
<div class="shortcuts">
<a href="~/Basket.aspx" class="basket">Shopping Cart</a> | <a href="~/Members/MyAccount.aspx" class="acct">Account</a> | #if($customer.IsAnonymous)
<a href="~/Login.aspx" class="login">Login</a>
#else
<a href="~/Logout.aspx" class="login">Logout</a>
#end
</div>
</td>
</tr>
<tr>
<td colspan="3" height="25"></td>
</tr>
</table>
<style type="text/css">
.CurrentLink a
{
color:#f8981d;
}
</style>
<script type="text/javascript" src="../../../../js/jquery-1.3.2.min.js">
jQuery(function( $ ){
$('a.next').click(function(){
$('#nav_header a').removeClass('CurrentLink');
var fragment = this.getAttribute('href');
$('#nav_header a[href=' + fragment + ']').toggleClass('CurrentLink');
});
});
</script>
<script type="text/javascript">
function select_nav() {
var nav_links = document.getElementById('#nav_header')
.getElementsByTagName('a');
var selected = location.pathname;
for (var i = 0; i < nav_links.length; i++) {
var link = nav_links[i].pathname;
// fiddle IE's view of the link
if (link.substring(0, 1) != '/')
link = '/' + link;
if (link == selected)
nav_links[i].setAttribute(cattr, 'CurrentLink');
}
}
window.onload = function() {
select_nav();
};
</script>
<div class="w2mHeaderLowerNavBg">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" width="30"></td>
<td align="left" >
<div class="w2mHeaderLowerNav" id="nav_header">
<a href="~/Default.aspx" >Home</a>
<a href="~/About-W7.aspx" >About</a>
<a href="~/Service-and-Parts-W4.aspx" >Service & Parts</a>
<a href="~/Consulting-W6.aspx" >Consulting</a>
<a href="~/Financing-W5.aspx" >Financing</a>
<a href="~/Contact-W3C2.aspx" >Contact</a>
<a href="~/AdvancedSearch.aspx" >Advanced Search</a>
</div>
</td>
<td align="right" width="232"> <div class="search">
[[ConLib:SimpleSearch]]
</div></td>
<td align="right" width="12"></td>
</tr>
</table>
</div>
I am working with the header component for a .net cart AbleCommerce. The active link effect will only be used in the header. I have a script that is working for all webpages, but it fails to apply to scriptlets. Ex. "About Us" is a webpage, the script functions as expected. "Home" is a default page that exists as a scriptlet (not a webpage created via admin) and teh script below fails.
I have tried several different variation of jquery and nvolicity (yuck!) with the same results described above. I tried using a full path url "http://wwwpage.aspx" instead of something like "~/page.aspx". I tried adding a reference to the ID within the links themselves.
There are only two header nav links that are non-webpages (again created as a webpage in the cart's admin) that I need to get this working for.
The script that works for webpages is:
<script type="text/javascript" src="../../../../js/jquery-1.3.2.min.js">
jQuery(function( $ ){
$('a.next').click(function(){
$('#nav_header a').removeClass('CurrentLink');
var fragment = this.getAttribute('href');
$('#nav_header a[href=' + fragment + ']').toggleClass('CurrentLink');
});
});
</script>
Any thoughts, ideas or resources would be greatly appreciated. I know that this is probably not the ideal .net sort of solution, the approach is what is required of me. Trying to learn as fast as I can...
Thanks!!
Julie
Full HTML code:
<!--
<Description>
Displays the standard store header.
</Description>
-->
<table id="storeHeader" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="18"></td>
</tr>
<tr>
<td> <div style="position:relative; left:-30px;"><a href="~/Default.aspx"><img src="../../../../App_Themes/alliedHealth/images/alliedHealthBrand1.png" width="542" height="54" border="0" /></a></div>
</td>
<td><div class="alliedPhone">Call 888.818.9696</div></td>
<td align="right">
<div class="shortcuts">
<a href="~/Basket.aspx" class="basket">Shopping Cart</a> | <a href="~/Members/MyAccount.aspx" class="acct">Account</a> | #if($customer.IsAnonymous)
<a href="~/Login.aspx" class="login">Login</a>
#else
<a href="~/Logout.aspx" class="login">Logout</a>
#end
</div>
</td>
</tr>
<tr>
<td colspan="3" height="25"></td>
</tr>
</table>
<style type="text/css">
.CurrentLink a
{
color:#f8981d;
}
</style>
<script type="text/javascript" src="../../../../js/jquery-1.3.2.min.js">
jQuery(function( $ ){
$('a.next').click(function(){
$('#nav_header a').removeClass('CurrentLink');
var fragment = this.getAttribute('href');
$('#nav_header a[href=' + fragment + ']').toggleClass('CurrentLink');
});
});
</script>
<script type="text/javascript">
function select_nav() {
var nav_links = document.getElementById('#nav_header')
.getElementsByTagName('a');
var selected = location.pathname;
for (var i = 0; i < nav_links.length; i++) {
var link = nav_links[i].pathname;
// fiddle IE's view of the link
if (link.substring(0, 1) != '/')
link = '/' + link;
if (link == selected)
nav_links[i].setAttribute(cattr, 'CurrentLink');
}
}
window.onload = function() {
select_nav();
};
</script>
<div class="w2mHeaderLowerNavBg">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="left" width="30"></td>
<td align="left" >
<div class="w2mHeaderLowerNav" id="nav_header">
<a href="~/Default.aspx" >Home</a>
<a href="~/About-W7.aspx" >About</a>
<a href="~/Service-and-Parts-W4.aspx" >Service & Parts</a>
<a href="~/Consulting-W6.aspx" >Consulting</a>
<a href="~/Financing-W5.aspx" >Financing</a>
<a href="~/Contact-W3C2.aspx" >Contact</a>
<a href="~/AdvancedSearch.aspx" >Advanced Search</a>
</div>
</td>
<td align="right" width="232"> <div class="search">
[[ConLib:SimpleSearch]]
</div></td>
<td align="right" width="12"></td>
</tr>
</table>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题可能出在你的 jquery 路径上。在 src 属性中使用绝对路径或尝试使用 ~
Problem maybe with your jquery path. Either use absolute path in src attribute or try using ~