在 ID 上更改 Twitter 引导导航

change twitter bootstrap nav on id

本文关键字:导航 Twitter ID      更新时间:2023-09-26

这曾经适用于我的旧导航,但现在不使用引导程序。我看到了 .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')