如何使用JSP创建选项卡式HTML页面

这与 JSP 不相关。这是关于您在 客户端的 演示 方式 。您可以使用很多jQuery
Tab插件。但只是开始，您可以使用类似下面的内容。让您的JSP通过这种方式生成HTML结构：

的HTML

<div >    <ul >        <li><a href="#tab1">Tab 1</a></li>        <li><a href="#tab2">Tab 2</a></li>        <li><a href="#tab3">Tab 3</a></li>    </ul>    <div >        <div id="tab1" > Tab 1 Contents        </div>        <div id="tab2" > Tab 2 Contents        </div>        <div id="tab3" > Tab 3 Contents        </div>    </div></div>

的CSS

* {font-family: 'Segoe UI';}.tabbable .tabs {list-style: none; margin: 0 10px; padding: 0;}.tabbable .tabs li {list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; z-index: 1;}.tabbable .tabs li a {text-decoration: none; color: #000; border: 1px solid #ccc; padding: 5px; display: inline-block; border-radius: 5px 5px 0 0; background: #f5f5f5;}.tabbable .tabs li a.active, .tabbable .tabs li a:hover {border-bottom-color: #fff; background: #fff;}.tabcontent {border: 1px solid #ccc; margin-top: -1px; padding: 10px;}

jQuery的

$(document).ready(function(){    $(".tabbable").find(".tab").hide();    $(".tabbable").find(".tab").first().show();    $(".tabbable").find(".tabs li").first().find("a").addClass("active");    $(".tabbable").find(".tabs").find("a").click(function(){        tab = $(this).attr("href");        $(".tabbable").find(".tab").hide();        $(".tabbable").find(".tabs").find("a").removeClass("active");        $(tab).show();        $(this).addClass("active");        return false;    });});