0
私が書いているプログラムについては、システムにログインした後にユーザーが着陸するメインナビゲーションページがあります。DIVがCSSファイルをロードするようにする
この画面では、2つのDIVを使用します。ナビゲーションバーの1つのdivは、iFrameとして使用されます。
私はナビゲーションバーを作成するためにw3.cssライブラリを使用していますが、実際には2番目のdivにターゲットファイルを読み込むときにこれがCSSのメインCSSファイルを実際に台無しにします。しかし、実際にやりたくないiFrameを使用するとうまく動作します。
divがターゲットリンクファイルを読み込んだときにCSSファイルを読み込むことができれば、問題は解決されます。
私の問題は、外部ファイルが読み込まれたときにCSSファイルをdivに読み込む方法です。
これは私のHTMLです：
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
<a href="listUser.php" target="container" id="main" class="w3-bar-item w3-button w3-hover-light-blue">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-light-blue w3-right">Link 3</a>
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
私のナビゲーションバーはJavaScript：
$(document).ready(function(){
$('#main').click(function() {
$('#My-container').load('listUser.php');
})
});
ファイルローダーのJavaScript：ファイルローダ機能の上
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
は私ではない私が上でそれを見つけましたサイトを使用しようとしましたが、コンソールを実行すると、「サイズ」が関数ではないというエラーがスローされます。長さを変えるとエラーは消えますが、コードは機能しません。
なぜ私は答えが怠け者であるかをすべてのファイルに貼り付けるだけです。
どうか私に光を見せてください。
を試すことができます。 'listUser.php'？ –
@ImmortalDudeはい、メインページにリンクされている同じCSSですが、** div **内では有効になりません。私はiFramesを使用していません。 – Sand
devツールのネットワークタブにCSSファイルがロードされていますか？また、...ボーナスの質問：編集：main.cssをindex.htmlに既に持っていると、なぜ追加していますか？ –