`` HTML `：RUN
<！DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset = "UTF-8 ">
<タイトル>単一ページ-システムを管理</ TITLE>
<スクリプトタイプの="テキスト/ JavaScriptを" = SRC "https://cdn.bootcss.com/jquery/1.9.0/jquery.js"> </ SCRIPT>
<スクリプトタイプ= "テキスト/ JavaScriptを" srcが= "JS / jquery.js"> </ SCRIPT >
<スタイルタイプ= "テキスト/ CSS">
/ *共通要素セット* /
* {マージン：0;パディング：0;}
HTML、本体{高さ：100％;}
UL {リストスタイル：なし;}
A {装飾テキスト：なし;色：#FFFFFF;}
.h3All {色：＃666666;}
/ * *公衆ヘッドセット/
.headGeneral {位置：絶対;幅：100％;高さ：70ピクセル、背景：URL（https://cdn.files.qdfuns.com/article/content/picture/201806/26/204135szuewaa7ak4sdssl.png）なしリピート左中心}
/ *公用左侧导航设置* /
.leftNavigation {位置：絶対;幅：240ピクセル、最小高さ：100％;上部：70ピクセル、左：0;}
.leftNavigation .leftNavigationUl {マージントップ：76px;}
.leftNavigation .leftNavigationUlリチウム{ボックスサイズ：境界ボックス;幅：100％;高さ：54px;行の高さ：54px;色：#FFFFFF;フォントサイズ：18px;パディング左：56px;}
.leftNavigation。 leftNavigationUl李：ホバー{背景：mediumblue。}
/ *公用右侧内容区设置* /
.rightContent {位置：絶対;幅：計算値（100％ - 240ピクセル）;上部：70ピクセル、左：240ピクセル;}
.rightContent .tabTitle {幅：100％;高さ：は50px;背景：＃d3d3d3;フォントサイズ：0;}
.rightContent .tabTitle>リチウム{マージントップ：5pxの;高さ：40ピクセル、行の高さ：40ピクセル、ディスプレイ：インラインブロック;幅：134px;テキスト整列：センター;ボーダー左上半径：4PX;ボーダー右上半径：4PX;マージン左：10pxの、フォントサイズ：16pxに、ユーザ選択：なし;カーソル：ポインタ;}
.rightContent .tabTitle> li.tabTitleLiDisplay {ボーダートップ：5pxの固体ブルー;背景：#FFFFFF;}
.rightContent .tabTitle> li.tabTitleLiNoDisplay {ボーダートップ：5pxの固体＃8D98A5、背景＃8D98A5;}
.rightContent .tabContent {幅：100％;背景：#FFFFFF;}
.rightContent .tabContent> DIV {表示：なし;パディング左：30px;パディングトップ：39px;}
.rightContent .tabContent> DIV：最初の子{表示：ブロック;}
</スタイル>
</ HEAD>
<BODY>
<DIV CLASS = "headGeneral" ID = "headGeneral">
</ div>
<divのクラス= "leftNavigation" ID = "leftNavigation">
<ULクラス= "leftNavigationUl">
<李ID = "1system">システム</ LI> <！ -該当するページ1system.htmlのindex.htmlをクリックした後（つまりこのページ）のhtmlフォルダ内の同じレベルにある- >
<LIは、上記のIDを述べ= " 2event ">イベント</ LI>
<LI上記ID =" 3securityPolicy ">セキュリティポリシー</ LI>
<LI上記ID =" 4assetAudit ">資産の監査</ LI>
<LI上記ID =" 5industryControlAudit「>工業監査</ LI>
<LIのID = "6interfaceManage">インターフェイスの管理</ LI>
<ID =リー"7dataAcquisition ">データ収集</ LI>
<LI ID =" 7ログ">ログイン</ LI>
<LI ID =" 8userManage ">ユーザー管理</ LI>
提供<李ID =" 9set「> </ LI>
< / UL>
</ div>
<DIV CLASS = "rightContent" ID = "rightContent">
<ULクラス= "tabTitle" ID = "tabTitle">
</李>を初期化<LIクラス= "tabTitleLiDisplay">
<LIクラス= "tabTitleLiNoDisplay">初期化2 </ LI>
<LIクラス= "tabTitleLiNoDisplay">初期化する3 </ LI>
</ UL>
<DIV CLASS = "tabContent"上記のid = "tabContent">
< - 1system.htmlに対応するページで、以下、！ index.htmlを（すなわち、このページ）ので、上のフォルダ、「ホワイトリスト」「2を初期化する」、「ブラックリスト」が置き換えられます「初期化」置き換え、そして兄弟のhtml - >
<divの=データ-blockNameを「ホワイトリスト」>ここを埋めるために、対応するタブのコンテンツ1 </ div>
</ div>の対応するタブコンテンツ2を埋めるために、ここでの<divデータ-blockNameを=「ブラックリスト」>
<！ -上記、対応しますインデックスのページ1system.html。> - HTMLフォルダ、「ホワイトリスト」を兄弟HTML（つまりこのページでは）「2を初期化する「置き換えます」、というように」ブラックリスト「に初期化」に置き換えられます
。</ div>
</ div>
</ BODY>
</ HTML>
<スクリプトタイプ= "テキスト/ JavaScriptを">
$（関数（）{
equalHeight（）;
tabTitleLiClick（）;
/ *リストの左側のナビゲーション領域をクリックして、コンテンツエリアの右側の内容を置き換え* /
。。$（ "leftNavigationUl"）をクリックします（関数（イベント）{
VAR $ eventTargetId event.target.id =;
$（ "＃1 leftNavigation"）CSS（ "高さ"、 "100％"）;.
/ *以下は、テンプレート領域は、場合によっては、JSでは、記入適切なロジック* /
IF（$ == eventTargetId "1system"）{
/ *パッケージの機能、ここでは、このページを避けるために、他のファイルで実行が長すぎるJS * /
$（ "＃のtabContent"）。ロード（ "HTML / 1system.html"、機能（） {
tabContentLoad（）;
ここで書かれた/ *インタラクティブコンテンツ領域、次いでtabTitleLiClickは（実行される）とqualHeight（）* /
}）
}他（$ eventTargetId == "IF1system "）{
/ *ここにこのページを避けるために、他のファイルで実行パッケージの機能は、長すぎるJS * /
$（ "＃のtabContent"）ロード（ "HTML / 1system.html"、機能（）{。
TabContentLoad（）;
/ *コンテンツインタラクティブ領域がtabTitleLiClick（）とqualHeight（）* /をここに書き、次に実行する
}）
}
/ * JSの上の領域のテンプレートは、場合に応じて、適切な論理*に必要事項を記入/
}）;
/ *右をクリックしてくださいコンテンツ領域にコンテンツを切り替えるタブのコンテンツエリア、* /
機能tabTitleLiClick（）{
$（ "tabTitleリー"。）をクリックして（関数（）{。
VAR selfIndex = $（この）.INDEX（）;
$（この）。 removeClass（ "tabTitleLiNoDisplay"）addClass（ "tabTitleLiDisplay"）兄弟（）removeClass（ "tabTitleLiDisplay"）addClass（ "tabTitleLiNoDisplay"）...。
。。。$（ "tabContent> DIV"）EQ（selfIndex）.SHOW（）兄弟（）非表示（）;
}）;
}
/ *内容区加载时、执行此函数* /
機能tabContentLoad（）{
VAR tabContentDiv = $（ "tabContent> DIV。"）;
VAR tabTitle = $（ "＃tabTitle"）;
VAR文字列= '';
tabTitle.empty（）;
tabContentDiv.each（機能（インデックス、項目）{
文字列+ = '<LIクラス= " '+（インデックス=== 0？ "tabTitleLiDisplay"： "tabTitleLiNoDisplay"）+'">' + $（アイテム）.ATTR（」データblockNameを"）+ '</ LI>';
}）;
tabTitle.html（文字列）;
tabContentDiv.eq（0）.SHOW（）。。兄弟（））（非表示。
tabTitleLiClick（）;
equalHeight（）;
}
/ *初始化左右等高* /
機能equalHeight（）{
VAR $ leftNavigation = $（ "＃1 leftNavigation"）。
VAR $ leftNavigationHeight =のparseInt（$ leftNavigation.css（ "高さ"））;
VAR $ tabContent = $（ "＃のtabContent"）;
VAR $ tabContentHeight =のparseInt（$ tabContent.css（ "高さ"））;
VAR $ rightContent = $（ "＃のrightContent"）;
VAR $ rightContentHeight = 50 + $ tabContentHeight。
VAR $ leftRightDistance = $ leftNavigationHeight- $ rightContentHeight。
IF（$ leftRightDistance> = 0）{
$ leftNavigation.css（ "バックグラウンド"、 "＃104599"）。
$ rightContent.css（{ "高さ"：（$ rightContentHeight + $ leftRightDistance）+ "PX"、 "背景"、 "＃1 FFFFFF"}）。
}他{
$ leftNavigation.css（{ "高さ"：（$ leftNavigationHeight- $ leftRightDistance）+ 'PX'、 "背景"： "＃104599"}）。
$ rightContent.css（ "背景"、 "＃1 FFFFFF"）;
}
}
}）。
</スクリプト>
`` `
36ページレイアウトのdiv + CSS
おすすめ
転載: www.cnblogs.com/gushixianqiancheng/p/10966666.html
ランキング