Download the JAR file "ditchnet JSP tabs taglis;
Copy the JAR file in the downloaded package to the install_dir/tomcat/commn/lib directory.
Make sure that the root directory in your web application is writable.
Reload your Web Application
Copy the org. ditchnet. taglib directory to your web application directory.
On your JSP page, add the tab library directive header and the XHTML "transitional doctype" (used to verify the correctness of CSS and browser compatibility-view related articles doctype switching)
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<% @ Page contenttype = "text/html" %>
<% @ Taglib uri = "http://ditchnet.org/jsp-tabs-taglib" prefix = "tab" %>
<HTML xmlns = "http://www.w3c.org/1999/xhtml" XML: lang = "en" lang = "en">
Add code to the
<Head>
<SCRIPT type = "text/JavaScript" src = "org. ditchnet. taglib/tabs. js"> </SCRIPT>
<Link type = "text/CSS" rel = "stylesheet" href = "org. ditchnet. taglib/tabstyle.css"/>
</Head>
This tag creates <SCRIPT> script and <link> tags to link necessary CSS and JavaScript to the page. You can also add additional scripts or styles to overwrite the default settings.
Add a <tab: tabcontainer> label for each tabbed pane group you want to create.
<Tab: tabcontainer>
</Tab: tabcontainer>
Give the <tab: tabcontainer> label an ID attribute, which is unique in your application (that is, the servlet context environment ).
<Tab: tabcontainer id = "foo-bar-container">
</Tab: tabcontainer>
Note: This ID must be unique in your application because it is used to maintain the index of the Selected tab in the tab container in your session.
Add the <tab: tabpane> label you want to add to the tab container.
<Tab: tabcontainer id = "foo-bar-container">
<Tab: tabpane> </Tab: tabpane>
<Tab: tabpane> </Tab: tabpane>
</Tab: tabcontainer>
Set a required ID and tabtitle attribute for each <tab: tabpane> label. The ID is passed to the page without any change, and the tabtitle is used to indicate the title of the tabpane tab at the top of the tab container. Just like in an HTML page, the ID must be unique to the page.
<Tab: tabcontainer id = "foo-bar-container">
<Tab: tabpane id = "foo" tabtitle = "foo! "> </Tab: tabpane>
<Tab: tabpane id = "bar" tabtitle = "bar! "> </Tab: tabpane>
<Tab: tabcontainer>
Add HTML or JSP page content where you want
<Tab: tabcontainer id = "foo-bar-container">
<Tab: tabpane id = "foo" tabtitle = "foo! ">
Foo is cool!
</Tab: tabpane>
<Tab: tabpane id = "bar" tabtitle = "bar! ">
Bar is cool!
</Tab: tabpane>
<Tab: tabcontainer>
Note: The content cannot be blank. If it is empty, an exception will occur.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
