JQuery是一个流行的JavaScript库，可以轻松地操作HTML文档并为网站添加动态效果。

其中最常用的功能之一是制作选项卡页。而选项卡页最常用的布局是水平布局，即每个选项卡都在同一行上。但有时需要制作竖向选项卡页，JQuery也可以轻松实现。

<div class=\"vertical-tabs\">

<ul class=\"tabs\">

<li><a href=\"#tab1\">选项卡1</a></li>

<li><a href=\"#tab2\">选项卡2</a></li>

<li><a href=\"#tab3\">选项卡3</a></li>

</ul>

<div class=\"tab-content\">

<div id=\"tab1\">

<p>这是选项卡1的内容。</p>

</div>

<div id=\"tab2\">

<p>这是选项卡2的内容。</p>

</div>

<div id=\"tab3\">

<p>这是选项卡3的内容。</p>

</div>

</div>

</div>

<script>

$(document).ready(function(){

$(\".tabs li\").click(function(){

var tab_id = $(this).find(\"a\").attr(\"href\");

$(\".tab-content div\").hide();

$(tab_id).show();

return false;

});

});

首先，需要一个包含选项卡和选项卡内容的div容器。选项卡用ul和li列表实现，每个li内包含一个a链接，链接到相应的选项卡内容。选项卡内容可以使用div实现，每个div的id与相应的选项卡a链接的href相同。

然后，在JQuery代码中，需要为每个选项卡li绑定点击事件。点击事件中，首先获取点击的选项卡的href值，然后将所有选项卡内容的div隐藏，然后显示对应的选项卡内容div。

最后，可以使用CSS样式对选项卡和选项卡内容进行调整，以实现更好的外观效果。