С новым годом всех!
Есть ссылка <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>
Попробуйте создать блок, в него поместить вкладки и его содержимое, а далее указать на этот блок.
<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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
Код возвращает Object object - как совместить всё в рамках replaceWith без дополнительных строк изначального присвоения и последующего встраивания...
Ниже представлен скрипт, работающий не во всех смартфонахА имеенно: IPhone 5,6, Android 4