Есть ссылка, и надо открыть jquery(ajax) блок

139
17 июля 2019, 16:10

С новым годом всех!
Есть ссылка <a href='id?<php script>'>Статистика</a> она у меня находиться в меню юзера, но если просто добавить #tabs-2 к той ссылке- ничего не произойдет(тоесть <a href='id?<php script>#tabs-2'>Статистика</a>, так как скрипт на Jquery(ajax) как я понял,вопрос в том, как открыть через ссылку?

; 
(function($, window, document, undefined) { 
 
  var pluginName = "tabulous", 
    defaults = { 
      effect: 'scale' 
    }; 
 
  function Plugin(element, options) { 
    this.element = element; 
    this.$elem = $(this.element); 
    this.options = $.extend({}, defaults, options); 
    this._defaults = defaults; 
    this._name = pluginName; 
    this.init(); 
  } 
 
  Plugin.prototype = { 
 
    init: function() { 
 
      var links = this.$elem.find('a.tabsxsw'); 
      var firstchild = this.$elem.find('li:first-child').find('a.tabsxsw'); 
      var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>'); 
 
      if (this.options.effect == 'scale') { 
        tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale'); 
      } else if (this.options.effect == 'slideLeft') { 
        tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft'); 
      } else if (this.options.effect == 'scaleUp') { 
        tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup'); 
      } else if (this.options.effect == 'flip') { 
        tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip'); 
      } 
 
      var firstdiv = this.$elem.find('#tabs_container'); 
      var firstdivheight = firstdiv.find('div:first').height(); 
 
      var alldivs = this.$elem.find('div:first').find('div'); 
 
      alldivs.css({ 
        'top': '0px' 
      }); 
 
      firstdiv.css('height', firstdivheight + 'px'); 
 
      firstchild.addClass('tabulous_active'); 
 
      links.bind('click', { 
        myOptions: this.options 
      }, function(e) { 
        e.preventDefault(); 
 
        var $options = e.data.myOptions; 
        var effect = $options.effect; 
 
        var mythis = $(this); 
        var thisform = mythis.parent().parent().parent(); 
        var thislink = mythis.attr('href'); 
 
 
        firstdiv.addClass('transition'); 
 
        links.removeClass('tabulous_active'); 
        mythis.addClass('tabulous_active'); 
        thisdivwidth = thisform.find('div' + thislink).height(); 
 
        if (effect == 'scale') { 
          alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale'); 
          thisform.find('div' + thislink).addClass('make_transist').addClass('showscale'); 
        } else if (effect == 'slideLeft') { 
          alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft'); 
          thisform.find('div' + thislink).addClass('make_transist').addClass('showleft'); 
        } else if (effect == 'scaleUp') { 
          alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup'); 
          thisform.find('div' + thislink).addClass('make_transist').addClass('showscaleup'); 
        } else if (effect == 'flip') { 
          alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip'); 
          thisform.find('div' + thislink).addClass('make_transist').addClass('showflip'); 
        } 
 
        firstdiv.css('height', thisdivwidth + 'px'); 
      }); 
 
    }, 
 
    yourOtherFunction: function(el, options) { 
      // some logic 
    } 
  }; 
 
  // A really lightweight plugin wrapper around the constructor, 
  // preventing against multiple instantiations 
  $.fn[pluginName] = function(options) { 
    return this.each(function() { 
      new Plugin(this, options); 
    }); 
  }; 
 
})(jQuery, window, document); 
$(document).ready(function($) { 
  $('#tabsx').tabulous({ 
    effect: 'slideLeft' 
  }); 
});
a:active, 
a:focus { 
  outline: expression(hideFocus='true'); 
} 
 
#tabs_container { 
  padding: 40px; 
  overflow: hidden; 
  position: relative; 
  background: white; 
} 
 
#tabs_container div { 
  margin-right: 40px; 
} 
 
.transition { 
  -webkit-transition: all .3s ease-in-out; 
  -moz-transition: all .3s ease-in-out; 
  -o-transition: all .3s ease-in-out; 
  -ms-transition: all .3s ease-in-out; 
  transition: all .3s ease-in-out; 
  -webkit-transition-delay: .3s; 
  -moz-transition-delay: .3s; 
  -o-transition-delay: .3s; 
  -ms-transition-delay: .3s; 
  transition-delay: .3s; 
} 
 
.make_transist { 
  -webkit-transition: all .3s ease-in-out; 
  -moz-transition: all .3s ease-in-out; 
  -o-transition: all .3s ease-in-out; 
  -ms-transition: all .3s ease-in-out; 
  transition: all .3s ease-in-out; 
} 
 
.hidescale { 
  -webkit-transform: scale(0.9); 
  -moz-transform: scale(0.9); 
  -o-transform: scale(0.9); 
  -ms-transform: scale(0.9); 
  transform: scale(0.9); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  filter: alpha(opacity=0); 
  filter: alpha(opacity=0); 
  opacity: 0; 
} 
 
.showscale { 
  -webkit-transform: scale(1); 
  -moz-transform: scale(1); 
  -o-transform: scale(1); 
  -ms-transform: scale(1); 
  transform: scale(1); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
  filter: alpha(opacity=100); 
  opacity: 1; 
  -webkit-transition-delay: .3s; 
  -moz-transition-delay: .3s; 
  -o-transition-delay: .3s; 
  -ms-transition-delay: .3s; 
  transition-delay: .3s; 
} 
 
.hideleft { 
  -webkit-transform: translateX(-100%); 
  -moz-transform: translateX(-100%); 
  -o-transform: translateX(-100%); 
  -ms-transform: translateX(-100%); 
  transform: translateX(-100%); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  filter: alpha(opacity=0); 
  opacity: 0; 
} 
 
.showleft { 
  -webkit-transform: translateX(0px); 
  -moz-transform: translateX(0px); 
  -o-transform: translateX(0px); 
  -ms-transform: translateX(0px); 
  transform: translateX(0px); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
  filter: alpha(opacity=100); 
  opacity: 1; 
  -webkit-transition-delay: .3s; 
  -moz-transition-delay: .3s; 
  -o-transition-delay: .3s; 
  -ms-transition-delay: .3s; 
  transition-delay: .3s; 
} 
 
.hidescaleup { 
  -webkit-transform: scale(1.1); 
  -moz-transform: scale(1.1); 
  -o-transform: scale(1.1); 
  -ms-transform: scale(1.1); 
  transform: scale(1.1); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  filter: alpha(opacity=0); 
  opacity: 0; 
} 
 
.showscaleup { 
  -webkit-transform: scale(1); 
  -moz-transform: scale(1); 
  -o-transform: scale(1); 
  -ms-transform: scale(1); 
  transform: scale(1); 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
  filter: alpha(opacity=100); 
  opacity: 1; 
  -webkit-transition-delay: .3s; 
  -moz-transition-delay: .3s; 
  -o-transition-delay: .3s; 
  -ms-transition-delay: .3s; 
  transition-delay: .3s; 
} 
 
.hideflip { 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
  filter: alpha(opacity=0); 
  opacity: 0; 
  -webkit-transform: rotatey(-90deg) scale(1.1); 
  -moz-transform: rotatey(-90deg) scale(1.1); 
  -o-transform: rotatey(-90deg) scale(1.1); 
  -ms-transform: rotatey(-90deg) scale(1.1); 
  transform: rotatey(-90deg) scale(1.1); 
  -webkit-transform-origin: 50% 50%; 
  -moz-transform-origin: 50% 50%; 
  -o-transform-origin: 50% 50%; 
  -ms-transform-origin: 50% 50%; 
  transform-origin: 50% 50%; 
} 
 
.showflip { 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
  filter: alpha(opacity=100); 
  opacity: 1; 
  -webkit-transition-delay: .3s; 
  -moz-transition-delay: .3s; 
  -o-transition-delay: .3s; 
  -ms-transition-delay: .3s; 
  transition-delay: .3s; 
  -webkit-transform: rotatey(0deg) scale(1); 
  -moz-transform: rotatey(0deg) scale(1); 
  -o-transform: rotatey(0deg) scale(1); 
  -ms-transform: rotatey(0deg) scale(1); 
  transform: rotatey(0deg) scale(1); 
  -webkit-transform-origin: 50% 50%; 
  -moz-transform-origin: 50% 50%; 
  -o-transform-origin: 50% 50%; 
  -ms-transform-origin: 50% 50%; 
  transform-origin: 50% 50%; 
} 
 
.tabsxsw_active { 
  background: white !important; 
  color: #655c89 !important; 
} 
 
.tabsxswclear { 
  display: block; 
  clear: both; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="tabsx"> 
  <ul> 
    <li><a class="tabsxsw" href="#tabs-1" title="">Информация</a></li> 
    <li><a class="tabsxsw" href="#tabs-2" title="">Статистика</a></li> 
  </ul> 
  <div id="tabs_container"> 
    <div id="tabs-1"> 
      .................................................................................................................. 
    </div> 
    <div id="tabs-2"> 
      ...........................................s................................................ 
    </div> 
  </div> 
</div>

Answer 1

Попробуйте создать блок, в него поместить вкладки и его содержимое, а далее указать на этот блок.

<script>
 $(function() {
   $("#tabs").tabs();
 });
</script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Первая вкладка</a></li>
    <li><a href="#tabs-2">Вторая вкладка</a></li>
  </ul>
  <div id="tabs-1">
    <p>Текст с первой вкладки</p>
  </div>
  <div id="tabs-2">
    <p>Текст со второй вкладки</p>
  </div>
</div>
READ ALSO
JavaScript нужна небольшая помощь [дубликат]

JavaScript нужна небольшая помощь [дубликат]

На данный вопрос уже ответили:

124
JS / JQ совместить объявленный в строке блок и объект

JS / JQ совместить объявленный в строке блок и объект

Код возвращает Object object - как совместить всё в рамках replaceWith без дополнительных строк изначального присвоения и последующего встраивания...

153
Script не работает в смартфонах

Script не работает в смартфонах

Ниже представлен скрипт, работающий не во всех смартфонахА имеенно: IPhone 5,6, Android 4

168