jquery ui tabs的最简单实现

最新推荐文章于 2024-07-15 11:38:08 发布

原创最新推荐文章于 2024-07-15 11:38:08 发布 · 655 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tabs #jquery #ui #stylesheet #class #url

Js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用jQuery UI Tabs实现的心理学模块界面展示案例。通过整合jQuery UI库与自定义脚本，实现了页面上的标签切换效果，展示不同心理学内容区域。

<%@ include file="/common/taglibs.jsp"%>
<head>
<link rel="stylesheet" href="/eitp/styles/newAllStyle/style.css"/>
<link rel="stylesheet" href="/eitp/scripts/jquery/ui/base/ui.all.css"/>
<script type="text/javascript" src="<s:url value='/scripts/jquery/jquery-1.3.2.js' />"></script>
<script type="text/javascript" src="<s:url value='/scripts/jquery/ui/ui.core.js' />"></script>
<script type="text/javascript" src="<s:url value='/scripts/jquery/ui/ui.tabs.js' />"></script>
<script type="text/javascript" src="<s:url value='/scripts/pageHelp/common.js' />"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ui-tabs-nav").tabs();

});
</script>

</head>
<div class="ui-tabs">
<div class="ui-tabs-nav">
<ul>
<li><a href="#panel-1"><s:text name="psychology.encyclopedia" /></a></li>
<li><a href="#panel-2"><s:text name="psychology.healthcare" /></a></li>
</ul>
<div id="panel-1" class="ui-tabs-panel">AA</div>
<div id="panel-2" class="ui-tabs-hide">BBB</div>
</div>
</div>