Закладки

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

январь 2005


Как это выглядит в браузере

Закладка 1

Содержимое закладки номер раз.

  • item 1
  • item 2
  • item 3

table data table data table data table data
table data table data table data table data
table data table data table data table data
Закладка 2

Содержимое закладки номер два.

  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5
  6. item 6
Закладка 3

Содержимое закладки номер три.

01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
<link rel="stylesheet" type="text/css" href="tabsheets.css" />
<script type="text/javascript" src="tabsheets.js"></script>
<div style="background: ButtonFace; padding: 1em;">
    <dl class="tabsheets">
        <dt>Закладка 1</dt>
        <dd>
            <div class="reducer">
                <p>Содержимое закладки номер раз.</p>
                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
                <hr />
                <table border="1" cellspacing="0" cellpadding="10">
                    <tr>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                    </tr>
                    <tr>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                    </tr>
                    <tr>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                        <td>table data</td>
                    </tr>
                </table>
                
            </div>
        </dd>
        <dt>Закладка 2</dt>
        <dd>
            <div class="reducer">
                <p>Содержимое закладки номер два.</p>
                <ol>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                    <li>item 6</li>
                </ol>
            </div>
        </dd>
        <dt>Закладка 3</dt>
        <dd>
            <div class="reducer">
                <p>Содержимое закладки номер три.</p>
            </div>
        </dd>
    </dl>
</div>
<script type="text/javascript">
    Make_Tabsheet();
</script>