在 ID 上更改 Twitter 引导导航
change twitter bootstrap nav on id
这曾经适用于我的旧导航,但现在不使用引导程序。我看到了 .nav a 的 javascript 解决方案,但我不能使用 javascript 将页面加载到主容器中。我在这里有什么选择吗?谢谢
<ul class="nav">
<li class="active" id="changetohome"><a style="cursor:pointer" id="changetohome"><i class="icon-home"></i> Home</a></li>
<li class="none" id="changetodiscover"><a style="cursor:pointer" id="changetodiscover"><i class="icon-home"></i> Explore</a></li>
</ul>
$('#changetohome').click(function () {
$('#loadingAjaxs').show(); $('#flubestext').hide();
$('#contentwrap').load('@Url.Action("FollowingDetail", "Following", new {@ajax = "yes"})', function () {
$('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState({ "page": "home" }, 'title1', '/'); $(window).scrollTop(0);
document.getElementById("changetohome").className = "active";
document.getElementById("changetodiscover").className = "none";
})
});
$('#changetodiscover').click(function () {
$('#loadingAjaxs').show(); $('#flubestext').hide();
$('#contentwrap').load('@Url.Action("TagPageDetail", "TagPage", new {@page = 0, @ajax = "yes"})', function () {
$('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState({ "page": "discover" }, 'title', '/discover'); $(window).scrollTop(0);
document.getElementById("changetohome").className = "none";
document.getElementById("changetodiscover").className = "active";
})
});
Bootstrap3 通过交换类名导航栏和折叠来更改导航。
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
我认为我的情况与您的情况有些不同,但是,我可以通过在myBootstrap中修改下面的脚本来加载不同的菜单.js
this.$element
.removeClass('collapse')
.addClass('collapsing')
[dimension](0)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('collapsing')
.addClass('in')
[dimension]('auto')
this.transitioning = 0
this.$element.trigger('shown.bs.collapse')
}
if (!$.support.transition) return complete.call(this)
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
this.$element
.one($.support.transition.end, $.proxy(complete, this))
.emulateTransitionEnd(350)
[dimension](this.$element[0][scrollSize])
}
Collapse.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('in')) return
var startEvent = $.Event('hide.bs.collapse')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element
[dimension](this.$element[dimension]())
[0].offsetHeight
this.$element
.addClass('collapsing')
.removeClass('collapse')
.removeClass('in')
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.trigger('hidden.bs.collapse')
.removeClass('collapsing')
.addClass('collapse')
相关文章:
- 如何使用Twitter引导程序点击按钮导航到另一个页面
- asp.net应用程序活动类中的Twitter引导程序导航
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- Twitter引导程序3-导航栏固定顶部-多行时重叠内容
- Twitter Bootstrap 粘性子导航在较短的页面上之前就已修复
- 在 ID 上更改 Twitter 引导导航
- 在 Twitter Bootstrap 3 中证明导航的合理性
- Twitter Bootstrap 3 导航栏切换按钮与不同的图标
- 使用 Twitter 引导程序 3 的网站出现 IE11 导航问题
- Twitter引导程序不可折叠导航栏
- 导航崩溃无法工作[Twitter Bootstrap]
- 默认情况下,Twitter引导导航选项卡未加载
- Twitter引导程序:修复用户滚动经过导航栏时导航栏顶部的问题
- 使用twitter引导程序进行选项卡导航
- 如何在用户点击Twitter Bootstrap链接后自动折叠移动视图上的顶部导航栏
- 如何制作Twitter BootstrapX导航条使用scrollspy
- Twitter Bootstrap,词缀,如何让导航在移动布局的顶部保持静态
- Twitter Bootstrap with PLAY框架设置导航栏<元素激活
- 适用于小型设备的Twitter引导响应导航栏标题
- Twitter引导程序导航栏选项卡“;隐藏“;事件