1
我创建2个标签：标签1个&标签2.我用视觉作曲家创建标签停止旧标签及新刷新标签时点击
/* =========================================================
* vc-tabs.js v1.0.0
* =========================================================
* Copyright 2013 Wpbakery
*
* Visual composer Tabs
* ========================================================= */
+ function ($) {
'use strict';
var Tabs, old, clickHandler, changeHandler;
/**
* Tabs object definition
* @param element
* @constructor
*/
Tabs = function (element, options) {
this.$element = $(element);
this.activeClass = 'vc_active';
this.tabSelector = '[data-vc-tab]';
// cached vars
this.useCacheFlag = undefined;
this.$target = undefined;
this.selector = undefined;
this.$targetTab = undefined;
this.$relatedAccordion = undefined;
this.$container = undefined;
};
/**
* Is cache used
* @returns {boolean}
*/
Tabs.prototype.isCacheUsed = function() {
var useCache, that;
that = this;
useCache = function() {
return false !== that.$element.data('vcUseCache');
};
if (undefined === this.useCacheFlag) {
this.useCacheFlag = useCache();
}
return this.useCacheFlag;
};
/**
* Get container
* @returns {*|Number}
*/
Tabs.prototype.getContainer = function() {
if (! this.isCacheUsed()) {
return this.findContainer();
}
if (undefined === this.$container) {
this.$container = this.findContainer();
}
return this.$container;
};
/**
* Find container
* @returns {window.jQuery}
*/
Tabs.prototype.findContainer = function() {
var $container;
$container = this.$element.closest(this.$element.data('vcContainer'));
if (! $container.length) {
$container = $('body');
}
return $container;
};
/**
* Get container accordions
* @returns {*}
*/
Tabs.prototype.getContainerAccordion = function() {
return this.getContainer().find('[data-vc-accordion]');
};
/**
* Get selector
* @returns {*}
*/
Tabs.prototype.getSelector = function() {
var findSelector, $this;
$this = this.$element;
findSelector = function() {
var selector;
selector = $this.data('vcTarget');
if (! selector) {
selector = $this.attr('href');
}
return selector;
};
if (! this.isCacheUsed()) {
return findSelector();
}
if (undefined === this.selector) {
this.selector = findSelector();
}
return this.selector;
};
/**
* Get target
* @returns {*}
*/
Tabs.prototype.getTarget = function() {
var selector;
selector = this.getSelector();
if (! this.isCacheUsed()) {
return this.getContainer().find(selector);
}
if (undefined === this.$target) {
this.$target = this.getContainer().find(selector);
}
return this.$target;
};
/**
* Get related accordion
* @returns {*}
*/
Tabs.prototype.getRelatedAccordion = function() {
var tab, filterElements;
tab = this;
filterElements = function() {
var $elements;
$elements = tab.getContainerAccordion().filter(function() {
var $that, accordion;
$that = $(this);
accordion = $that.data('vc.accordion');
if (undefined === accordion) {
$that.vcAccordion();
accordion = $that.data('vc.accordion');
}
return tab.getSelector() === accordion.getSelector();
});
if ($elements.length) {
return $elements;
}
return undefined;
};
if (! this.isCacheUsed()) {
return filterElements();
}
if (undefined === this.$relatedAccordion) {
this.$relatedAccordion = filterElements();
}
return this.$relatedAccordion;
};
/**
* Trigger event
* @param event
*/
Tabs.prototype.triggerEvent = function (event) {
var $event;
if ('string' === typeof event) {
$event = $.Event(event);
this.$element.trigger($event);
}
};
/**
* Get target tab
* @returns {*|Number}
*/
Tabs.prototype.getTargetTab = function() {
var $this;
$this = this.$element;
if (! this.isCacheUsed()) {
return $this.closest(this.tabSelector);
}
if (undefined === this.$targetTab) {
this.$targetTab = $this.closest(this.tabSelector);
}
return this.$targetTab;
};
/**
* Tab Clicked
*/
Tabs.prototype.tabClick = function() {
this.getRelatedAccordion().trigger('click');
};
/**
* Tab Show
*/
Tabs.prototype.show = function() {
// if showed no need to do anything
if (this.getTargetTab().hasClass(this.activeClass)) {
return;
}
this.triggerEvent('show.vc.tab');
this.getTargetTab().addClass(this.activeClass);
};
/**
* Tab Hide
*/
Tabs.prototype.hide = function() {
// if showed no need to do anything
if (! this.getTargetTab().hasClass(this.activeClass)) {
return;
}
this.triggerEvent('hide.vc.tab');
this.getTargetTab().removeClass(this.activeClass);
};
//Tabs.prototype
// Tabs plugin definition
// ==========================
function Plugin(action, options) {
var args;
args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var $this, data;
$this = $(this);
data = $this.data('vc.tabs');
if (! data) {
data = new Tabs($this, $.extend(true, {}, options));
$this.data('vc.tabs', data);
}
if ('string' === typeof action) {
data[ action ].apply(data, args);
}
});
}
old = $.fn.vcTabs;
$.fn.vcTabs = Plugin;
$.fn.vcTabs.Constructor = Tabs;
// Tabs no conflict
// ==========================
$.fn.vcTabs.noConflict = function() {
$.fn.vcTabs = old;
return this;
};
// Tabs data-api
// =================
clickHandler = function (e) {
var $this;
$this = $(this);
e.preventDefault();
Plugin.call($this, 'tabClick');
};
changeHandler = function (e) {
var caller;
caller = $(e.target).data('vc.accordion');
if (undefined === caller.getRelatedTab) {
/**
* Get related tab from accordion
* @returns {*}
*/
caller.getRelatedTab = function() {
var findTargets;
findTargets = function() {
var $targets;
$targets = caller.getContainer().find('[data-vc-tabs]').filter(function() {
var $this, tab;
$this = $(this);
tab = $this.data('vc.accordion');
if (undefined === tab) {
$this.vcAccordion();
}
tab = $this.data('vc.accordion');
return tab.getSelector() === caller.getSelector();
});
return $targets;
};
if (! caller.isCacheUsed()) {
return findTargets();
}
if (undefined === caller.relatedTab) {
caller.relatedTab = findTargets();
}
return caller.relatedTab;
};
}
Plugin.call(caller.getRelatedTab(), e.type);
};
$(document).on('click.vc.tabs.data-api', '[data-vc-tabs]', clickHandler);
$(document).on('show.vc.accordion hide.vc.accordion', changeHandler);
}(window.jQuery);
的Html
<div class="vc_row wpb_row td-pb-row"><div class="wpb_column vc_column_container td-pb-span12">
<div class="wpb_wrapper"><div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab><a href="#1446604677128-25463b2a-f24d" data-vc-tabs data-vc-container=".vc_tta"><span class="vc_tta-title-text">Tab 1</span></a></li>
<li class="vc_tta-tab" data-vc-tab><a href="#1446604677478-7e69336f-9679" data-vc-tabs data-vc-container=".vc_tta"><span class="vc_tta-title-text">Tab 2</span></a></li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="1446604677128-25463b2a-f24d" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1446604677128-25463b2a-f24d" data-vc-accordion data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Tab 1</span></a></h4></div>
<div class="vc_tta-panel-body">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="1446604677478-7e69336f-9679" data-vc-content=".vc_tta-panel-body"><div class="vc_tta-panel-heading"><h4 class="vc_tta-panel-title"><a href="#1446604677478-7e69336f-9679" data-vc-accordion data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Tab 2</span></a></h4></div>
<div class="vc_tta-panel-body">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
</div>
</div>
</div></div></div></div></div></div>
如何：标签1停止&标签2当我点击标签2和标签2时重新加载内容停止&标签1当我点击标签时重新加载内容1
演示这样的websi te：http://www.fullmatchesandshows.com/2015/11/03/borussia-moenchengladbach-vs-juventus-highlights-full-match/
谢谢！