实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 标签页（Tabs） - 垂直的标签页</title>
6
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
7
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
8
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <script>
11
  $(function() {
12
    $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
13
    $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
14
  });
15
  </script>
16
  <style>
17
  .ui-tabs-vertical { width: 55em; }
18
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
19
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
20
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
21
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
22
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}