data-toggle ='tab'或='pills'不允许url工作

时间:2016-03-08 17:35:13

标签: javascript html5 twitter-bootstrap tabs nav-pills

我首先要说的是,我已经在网上阅读了很多关于它的内容,所有的解决方案都发现我无法正确实现它们,有些问题修复了一些问题但创建了其他问题。另一件事是我不能评论其他帖子因为声誉低(noob),如果我能这样做,我就不会发布新问题。

我正在创建一个网站,其中包含一个导航栏,网站的每个部分都有不同的页面:Home.html,AboutUs.html ...

我实现了导航栏,但我认为在每个页面粘贴导航栏的相同代码并不是一个好的解决方案,所以我找了一种方法来优化它。

现在我创建了另一个网站(Navbar.html)并将其添加到其他网页中,看起来不错:

<script>
    $(function(){
        $("#navbar").load("Navbar.html");
    });
</script>

并在体内:

<div id="navbar"></div>

尝试自动化“活动”类时出现问题。为此我尝试了data-toggle ='tab'和data-toggle ='pill',但在这两种情况下,活动都发生了变化,但是当点击按钮时,webite没有改变。 有代码:

<ul class="nav navbar-nav" >
    <li class="menuText"><a href="Home.html" data-toggle="tab" >Home</a></li>
    <li class="menuText"><a href="AboutUs.html" data-toggle="tab" >About Us</a></li>
    <li class="menuText"><a href="Donate.html" data-toggle="tab" >Donate</a></li>
    <li class="menuText"><a href="Volunteer.html" data-toggle="tab" >Volunteer</a></li>
    <li class="menuText"><a href="Contact.html" data-toggle="tab" >Contact</a></li>
</ul>

我也尝试用.js文件重定向:

$('#home').load('Home.html');
$('#aboutus').load('AboutUs.html');
$('#donate').load('Donate.html');
$('#volunteer').load('Volunteer.html');
$('#contact').load('Contact.html');

它工作得很好,当点击按钮时它改变了页面,但是我发现如果我向下滚动,那么我在不断变化的页面下方不断打开第一页。 (很难解释这一点,希望你理解)

我还尝试添加在线发现的大量功能,但我不知道它们是否正常工作。我想我没有正确实现它们或在错误的地方实现它们。我是html中的菜鸟。我真的不知道如何调用该函数:S 例如:

    $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav a[href="Home.html"]').tab('show');

        $('.nav-tabs a').click(function (e) {
            $(this).tab('show');
            var scrollmem = $('body').scrollTop();
            window.location.hash = this.hash;
            $('html,body').scrollTop(scrollmem);
        });
    });

无论如何我可以做到,或者在每个页面中自动化“活动”课程的其他方式?

感谢您的时间

0 个答案:

没有答案