一个页面主题Bootstrap导航链接不会指向另一个页面，但它适用于页面内的锚点 [英] One page theme Bootstrap Navigation Link does not direct to another page, while it works for anchors inside the page
问题描述
我一直在ASP MVC 5应用程序中使用一个引导页面主题。由于它是一个页面，所有导航链接都指向页面内的锚点。然后我需要一个额外的链接指向另一个页面，但它不起作用。当我看到源代码时，href就好了，悬停也很好，但点击时它什么都不做。
< li class =active>< a href =/ ShoppingCart>购物车（2）< / a>< / li>
这里是html代码：
< nav class =fixed-topid =navigationstyle =top：0px; opacity：1;>
< div class =container>
< div class =row-fluid>
< div class =span12 center>
<！ - - LOGO - >
< a class =brand pull-lefthref =./>
< img src =/ assets / images / logo.pngalt =Treble>
< / a>
<！ - - END LOGO - >
<！ - MOBILE MENU BUTTON - >
< div class =mobile-menudata-toggle =collapsedata-target =。nav- collapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / div>
<！ - 结束移动菜单按钮 - >
<！ - 主菜单 - >
< ul id =main-menuclass =nav-collapse collapse>
< li class =>< a href =＃page-welcome>主页< / a>< / li>
< li class =>< a href =＃page-product>产品< / a>< / li>
< li class =>< a href =＃page-about>关于我们< / a>< / li>
< li>< a href =＃page-news>新闻< / a>< / li>
< li class =>< a href =＃page-contact>联络< / a>< / li>
< li class =active>< a href =/ ShoppingCart>购物车（2）< / a>< / li>
< / ul>
<！ - END MAIN MENU - >
<！ - - 社交图标 - >
< div class =social-icons pull-rightid =navRight>
< a href =mailto：info@panairsan.comclass =phoneNumber> info@panairsan.com< / a>
< a href =tel：+62215807881class =phoneNumber logOffPadding> +62（21）580 7881< / a>
< / div>
<！ - END SOCIAL ICONS - >
< / div>
< / div>
< / div>
< / nav>
以下是相关的css类：
.fixed-top {
position：fixed;
top：0px;
opacity：0;
filter：alpha（opacity = 0）;
}
#navigation＃main-menu {
float：right;
}
#navigation .social-icons {
display：none;
}
我认为这完全是关于代码的，没有别的东西可以影响链接。请让我知道，如果你需要更多的代码来解决这个奇怪的问题。
我也尝试过这一个：
< a href =./ ShoppingCart>
添加一个点，例如可以进入主页的徽标（刷新页面），但仍然无法正常工作。
感谢
更新
我使用 jquery.scrollTo 。也许有这个插件的东西？
我使用的主题是这个：
更新jquery.scrollTo
我继续搜索，并将问题缩小到jquery.scrollTo。看起来这个插件阻止了页面到任何地方。有没有人经历过jquery.scrollTo？
更新路由机制：
routes.MapRoute（
name：Default，
url：{controller} / {action} / {id}，
默认值：new {controller =Home，action =Index，id = UrlParameter.Optional}，
namespaces：new string [] {percobaan2.Controllers}
）;
重要更新
主要问题：链接处于活动状态，但不直接指向链接的页面。它甚至没有指向404页面或任何东西。它只是不执行href位置。
在href链接中调用类external：
< a href =./ ShoppingCartclass =external>
I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link to direct to another page, but it does not work. When I see the source code, the href is just fine, the hover is also fine, but when clicked it does nothing. Please help me spot the problem.
the problem is here:
<li class="active"><a href="/ShoppingCart">Cart (2)</a></li>
here is the html code:
<nav class="fixed-top" id="navigation" style="top: 0px; opacity: 1;">
<div class="container">
<div class="row-fluid">
<div class="span12 center">
<!-- LOGO -->
<a class="brand pull-left" href="./">
<img src="/assets/images/logo.png" alt="Treble">
</a>
<!-- END LOGO -->
<!-- MOBILE MENU BUTTON -->
<div class="mobile-menu" data-toggle="collapse" data-target=".nav- collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- END MOBILE MENU BUTTON -->
<!-- MAIN MENU -->
<ul id="main-menu" class="nav-collapse collapse">
<li class=""><a href="#page-welcome">Home</a></li>
<li class=""><a href="#page-product">Product</a></li>
<li class=""><a href="#page-about">About Us</a></li>
<li><a href="#page-news">News</a></li>
<li class=""><a href="#page-contact">Contact</a></li>
<li class="active"><a href="/ShoppingCart">Cart (2)</a></li>
</ul>
<!-- END MAIN MENU -->
<!-- SOCIAL ICONS -->
<div class="social-icons pull-right" id="navRight">
<a href="mailto:info@panairsan.com" class="phoneNumber">info@panairsan.com</a>
<a href="tel:+62215807881" class="phoneNumber logOffPadding">+62 (21) 580 7881</a>
</div>
<!-- END SOCIAL ICONS -->
</div>
</div>
</div>
</nav>
Here is the related css classes:
.fixed-top {
position: fixed;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
}
#navigation #main-menu {
float: right;
}
#navigation .social-icons {
display: none;
}
I think that is all about the code, nothing else seems to be effecting the link. Please let me know if you need more code to solve this weird problem.
I tried this one also:
<a href="./ShoppingCart">
Adding a dot, like the logo that is able to go to home page (refresh the page), but still does not work.
Thanks
Update
I use jquery.scrollTo. Maybe there is something with this plugin?
The theme I use is this one:
Wrapbootsrap - Treble One Page Theme
UPDATE about jquery.scrollTo
I keep searching, and I am narrowing the problem to jquery.scrollTo. It seems that the plugin is preventing the page from going anywhere. Anywone here is experienced with jquery.scrollTo?
UPDATE Routing Mechanism:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
namespaces: new string[] { "percobaan2.Controllers" }
);
IMPORTANT UPDATE
the main problem: the link is active but it does not direct to the linked page. It does not even direct to a 404 page or anything. It just does not execute the href location.
In the href link call the class "external" like this:
<a href="./ShoppingCart"class="external">
这篇关于一个页面主题Bootstrap导航链接不会指向另一个页面，但它适用于页面内的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
