Happy New Year to all!
There is a link <a href='id?<php script>'>Статистика</a> I have it in the user menu, but if you just add #tabs-2 to that link, nothing happens ( <a href='id?<php script>#tabs-2'>Статистика</a> , since the Jquery (ajax) script, as I understand it, the question is how to open through a link?

 ; (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>

  • I can not understand your problem, because the above code works ... - XelaNimed

1 answer 1

Try to create a block, place tabs and its contents into it, and then point to this block.

 <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>
  • What you suggested did not work. - Topper-H
  • Check out the edit - teamspam
  • Nothing has changed, try to put in front of this link <a href="#tabs-2">тест</a> - it will not work ... - Topper-H
  • So you need to use links within <div id="tabs"> In an extreme case, designate these links somehow, for example: <a href="#tabs-2" id="tabs-2">тест</a> <script>$("#tabs-2").tabs();</script> It is advisable to load the contents of <script> after downloading all the content, like mostly comments - teamspam am
  • The bottom line is that this link is far beyond <div id="tabs"> , or rather, in the upper block, and I need to open the 2 tab- "Statistics" on the transition - Topper-H