如何使用JSP创建Tabbed Html页面(How to create Tabbed Html page using JSP)
我想创建选项卡式Html页面,每个选项卡上都有多个提交按钮。 如何使用JSP创建Tabbed html页面。
I want to create tabbed Html page which will having multiple submit buttons on each Tab. How to create Tabbed html pages using JSP.
最满意答案
这与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; }); });小提琴: http : //jsfiddle.net/praveenscience/LZEHP/
This is something not related to JSP. This is about how you present in the client side. You can use a lot of jQuery Tab plugins. But just to start, you can use something like the below. Get your JSP generate the HTML structure this way:
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/
更多推荐
发布评论