javascript - 如何使用 JSP 创建标签式 Html 页面

Question

我想创建标签式 Html 页面，每个标签上都有多个提交按钮。如何使用 JSP 创建选项卡式 html 页面。

Answer 1

这与 JSP 无关。这是关于您在客户端中的呈现方式。您可以使用很多 jQuery Tab 插件。但只是开始，您可以使用类似下面的内容。让您的 JSP 以这种方式生成 HTML 结构:

HTML

<div class="tabbable">
    <ul class="tabs">
        <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 class="tabcontent">
        <div id="tab1" class="tab">
            Tab 1 Contents
        </div>
        <div id="tab2" class="tab">
            Tab 2 Contents
        </div>
        <div id="tab3" class="tab">
            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;
    });
});

fiddle :http://jsfiddle.net/praveenscience/LZEHP/