<div id="tab-side-container">
<ul>
<li><a href="#side-tab1">Tab 1</a></li>
<li><a href="#side-tab2">The Second Tab</a></li>
<li><a href="#side-tab3">Tab C</a></li>
</ul>
<div class="panel-container">
<div id="side-tab1">
<h2>Configurations</h2>
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
</div>
<div id="side-tab2">
<h2>Heading 2</h2>
<p>Stuff from the second tab.</p>
</div>
<div id="side-tab3">
<h2>Heading 3</h2>
<p>More stuff from the last tab.</p>
</div>
</div>
</div>
Creating tabs shortcode
2 个回复
SO网友:Dave Romsey
用户2587741在问题中发布了他们问题的答案：
$tabs_divs = \'\';
function tabs_group($atts, $content = null ) {
global $tabs_divs;
$tabs_divs = \'\';
$output = \'<div id="tab-side-container"><ul\';
$output.=\'>\'.do_shortcode($content).\'</ul>\';
$output.= \'<div class="panel-container">\'.$tabs_divs.\'</div>\';
return $output;
}
function tab($atts, $content = null) {
global $tabs_divs;
extract(shortcode_atts(array(
\'id\' => \'\',
\'title\' => \'\',
), $atts));
if(empty($id))
$id = \'side-tab\'.rand(100,999);
$output = \'
<li>
<a href="#\'.$id.\'">\'.$title.\'</a>
</li>
\';
$tabs_divs.= \'<div id="\'.$id.\'">\'.$content.\'</div>\';
return $output;
}
add_shortcode(\'tabs\', \'tabs_group\');
add_shortcode(\'tab\', \'tab\');
SO网友:Jignesh Patel
创建选项卡短代码。使用引导选项卡面板，所以必须在HTML中使用引导类，并且不要缺少引导js和css链接
Code put in your current theme function.php file 然后用这个[tab_review] 更多信息：http://getbootstrap.com/javascript/#tabs
function tab_custom() {
$tab_data=\'\';
$tab_data.=\'<div id="tab-side-container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>Home</h2>
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Profile</h2>
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Messages</h2>
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Settings</h2>
<p>This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.</p>
</div>
</div>
</div>\';
return $tab_data;
}
add_shortcode( \'tab_review\', \'tab_custom\' );
结束