TOGOUTECH

javascript - Bootstrap : Multiple pages (divs) and navbar

coder 2024-12-09 原文

我想使用这个流行的模板:

http://getbootstrap.com/examples/navbar/

我不想链接到 about.htm 或 contact.htm，此内容应该在模板内(多页/div)。

这一定是这个样子:

<div>
<div id="home">home...</div>
<div id="about">about...</div>
<div id="contact">contact...</div>
</div>

但是如何从导航标签“链接”到 div？

这行不通:

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>

非常感谢!

最佳答案

您需要使用 JavaScript 和 JQuery 来执行此操作。

有多种方法可以实现这一目标。

选项 1

创建一个index.html，指定一个<div class="container">并将其留空。然后用jQuery加载home.html进入.container对象，并对所有其他页面执行相同的操作。

$(document).ready(function() {
    $(".container").load("home.html");
});

$("ul.navbar-nav li").each(function() {
    $(this).on("click", function{
        $(".container").load($(this).attr("data-page")+".html");
    });
});

在这种情况下，href你的 URL 的值应该总是“#”并且你应该给它一个 data-page="about"如果您希望它显示关于页面。

选项 2

在一个页面中创建所有 div，为它们提供一个隐藏它们的类，使用 jQuery 隐藏所有 div，但要显示的除外。

<div class="container">
    <div id="home"></div>
    <div id="about" class="hidden"></div>
    <div id="contact" class="hidden"></div>
</div>

您的 JavaScript 文件:

$("ul.navbar-nav li").each(function() {
    $(this).on("click", function{
        // Toggle classes of divs
    });
});

你可以往上读on this page看看 Bootstrap 是如何做到的，这样您就不必自己编写了。

关于javascript - Bootstrap : Multiple pages (divs) and navbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27139963/

javascriptBootstrap34codedivjquerytwitter-bootstrap

有关javascript - Bootstrap : Multiple pages (divs) and navbar的更多相关文章

  1. javascript - Initiate Masonry - 在无限滚动和参数搜索之后 - 2

    AJAX和Masonrygrid有问题.砌体网格很简单，没有在正确的时间启动。在滚动或使用参数搜索转到特定类别之前，效果非常好。可以找到示例站点here.砌体Masonry是一个JavaScript网格布局库。通常与Bootstrap或其他未正确对齐项目的网格系统一起使用。示例:仅自举:引导和砌体:滚动时下一列将添加到旧列之上。提供与unloadedimages几乎相同的输出这使得图像重叠。这通常可以通过使用我已经包含在提供的代码中的imagesLoaded来解决。使用参数搜索时Masonry在AJAX之后没有被解雇。这意味着它根本不起作用。所以柱子在没有砌体的情况下被加载。请参阅sa

  2. javascript - 鼠标点击和触摸的不同行为 - 触摸屏功能错误，但使用鼠标 - 2

    Stackoverflow对当前版本的帮助太大了，但目前我完全迷失了方向，因为我不知道如何解决一个问题。我将非常感谢您的任何建议。我有带参数的产品容器。它们出现在鼠标上:悬停(用css完成)。问题是如果有人点击手机，它会触发两个事件:点击和鼠标悬停。但我需要移动设备的不同行为。所以我使用了stackoverflow的解决方案，在那里我可以检查浏览器是否知道touchstart事件。在有人使用可触摸屏幕但使用鼠标之前，它工作正常。因此，该用户将单击容器，参数将显示出来，而不会重定向到产品详细信息。但是鼠标行为是错误的。我需要的是，如果有人点击图片，它会首先显示参数，第二次点击时它会重定向

  3. javascript - 在 Internet Explorer 中的 contenteditable div 上隐藏插入符号(文本光标) - 2

    我有一个contenteditablediv，我在上面有文件拖放和复制粘贴图像事件。通过使用color:transparent我可以隐藏chrome浏览器上闪烁的光标。但在IE中我开始知道“在IE上输入的文本光标的颜色总是背景颜色的反色”。来源:HowdoIchangethecolorofthetextcursorinaninputfieldinIE?是否有任何其他方法可以禁用光标或更改闪烁光标的速度，使其看起来像隐藏在IE中。 最佳答案 您可以在CSS中使用:caret-color:transparent虽然在IE中不起作用。这是

  4. javascript - 如何不允许在 AngularJS 的 ui-select 中复制粘贴值 - 2

    我有一个下拉列表和一个ui-select。基于下拉值ui-select值是绑定(bind)的。但如果我直接将该特定值粘贴到ui-select中，它就会显示为选中状态。我们如何防止ui-select复制粘贴值？示例如下所示。选择查询{{$item.ShortDescription}}{{qiQueryFinding.ShortDescription}} 最佳答案 http://plnkr.co/edit/BVaXpviCACi5sd3aw9oX?p=preview使用这些代码。{{$select.selected.name}}emai

  5. javascript - Angular2 ng2-图表自定义？ - 2

    我已经开始使用angular2ng2-chart。对于我使用angular2ng2-chart创建的下图，我有几个问题，但仍想进行更多自定义:问题:1)当没有像上图Nov-7中那样的值为0(零)的值时，如何在两点之间画一条虚线？2)如何制作阴影效果、不透明度或多种颜色的组合？3)当我将鼠标悬停在任何定义的点上时以及如果我想在鼠标悬停时更改y轴网格颜色时如何获取y轴的值。使用ng2-chart悬停功能的最佳方法是什么？当前示例代码和配置文件:index.htmlOverviewindex.component.tsimport{Component,Output,EventEmitter,O

  6. javascript - webpack 外部设置不工作，文件被包含 - 2

    我正在为react-toolbox重新打包cljsjs，我需要做的是不在完成的包中包含react和react-dom，所以，我显然添加了:externals:{"react":"React","react-dom":"ReactDOM"},到webpack.config.js，但它似乎不起作用。在生成的.js文件中，我期望是这样的:123:function(...){module.exports=React;},却发现:/*372*//***/function(module,exports,__webpack_require__){/*WEBPACKVARINJECTION*/(fun

  7. javascript - 以编程方式将验证规则附加到表单字段 - 2

    我正在使用VeeValidate对使用Vue.js制作的表格进行一些验证.我将其设置为显示一个跨度，其中包含与发生错误的输入相关的错误消息。{{errors.first('panelData.AnalysisDate')}}所有输入都以相同的方式设置，并且都正常工作。当我尝试向需要date-between的上述输入添加验证规则时出现问题。使用从今天开始的一年作为最大值的规则。date_between:{min,max}v-validate属性接收由|分隔的验证规则字符串。有一种方法可以通过自动附加到Vue实例的验证器实例动态添加规则。$validator.attach({field},

  8. javascript - 带有 GSAP 的 Janky 视差文本 - 2

    我尝试制作带有视差的文本但失败了。代码似乎无伤大雅，似乎没有做错任何事，但滚动的外观和感觉却大错特错。标记是这样的:SomeHeadergettingalsolong像这样的样式:.container{box-sizing:border-box;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:1400px;}.text-center{text-align:center;}.section-parallax{background:black;overflow:hidden;&,&.

  9. javascript - 在 AngularJS 之后加载 jQuery - 2

    这个问题在这里已经有了答案:"ThinkinginAngularJS"ifIhaveajQuerybackground?[closed](15个答案)关闭5年前。我试图在完整的页面加载后运行一个小的jQuery代码段，但即使在页面完全加载后也没有呈现一些AngularJS代码。jQuery在页面加载后在控制台中工作。这是我正在尝试的jQuery:jQuery("a:contains('Clone')").parent().parent().parent().prepend(jQuery("#clone_external"));但还是没有发生克隆按钮不是普通按钮，它是一个Angular按

  10. javascript - Vue 资源 - plugin.apply 不是函数 - 2

    我有一个用Vue1构建的分页组件，为此我从Laravel分页接收数据:Novideosfoundfor"{{query}}""importeventHubfrom'../events.js'exportdefault{props:['query'],data(){return{videos:[],meta:null,showPagination:false,zeroVideos:false,}},methods:{getVideos(page){this.$http.get('/search/videos?q='+this.query+'&page='+page).then((resp

随机推荐