要在WordPress中创建自定义选项卡而不使用iframe,可以使用JavaScript和CSS来实现。以下是一个基本的解决方案,包含代码示例:
(function($) {
$(document).ready(function() {
// 隐藏所有的选项卡内容
$('.tab-content').hide();
// 显示第一个选项卡的内容
$('.tab-content:first').show();
// 激活第一个选项卡
$('.tabs li:first').addClass('active');
// 点击选项卡时切换内容
$('.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
// 移除所有选项卡的激活状态
$('.tabs li').removeClass('active');
// 添加激活状态到当前选项卡
$(this).addClass('active');
// 隐藏所有选项卡内容
$('.tab-content').hide();
// 显示当前选项卡的内容
$("#"+tab_id).show();
})
});
})(jQuery);
function custom_tabs_scripts() {
wp_enqueue_script( 'custom-tabs', get_template_directory_uri() . '/custom-tabs.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'custom_tabs_scripts' );
- 选项卡1
- 选项卡2
- 选项卡3
选项卡1的内容
这里是选项卡1的内容。
选项卡2的内容
这里是选项卡2的内容。
选项卡3的内容
这里是选项卡3的内容。
.tabs li {
display: inline-block;
padding: 10px;
cursor: pointer;
}
.tabs li.active {
background-color: #ccc;
}
.tab-content {
display: none;
}
这样,你就可以在WordPress中创建自定义选项卡,而不使用iframe。当你点击选项卡时,对应的内容将显示出来。