我创建了2个标签：标签1＆amp;标签2.我使用visual composer创建标签
/* =========================================================
* 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停止＆amp;当我点击选项卡2和选项卡2停止和选项时，选项卡2重新加载内容标签1在我点击标签1
时重新加载内容谢谢！
答案 0 :(得分：0)
我不确定您对“重新加载内容”的看法是什么，但您可以在显示如下的标签上点击内容：
$(document).on('show.vc.accordion', function() {
console.log('shown tab');
});