[英]Include HTML in JavaScript (.js) File
HTML
<?php $var = 1; include('PHP/NavigationBar.php'); ?>
導航.php
<div class="sidenav">
<h5>JavaScript</h5>
<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small"
onclick="myAccFunc('1')"> Main Heading <i class="fa fa-caret-down"></i></button>
<div id="1" class="w3-blue w3-hide w3-card" >
<a class="<?php echo (($var==1)?'active':'');?>" href="Page1.php">Page 1</a>
<a class="<?php echo (($var==2)?'active':'');?>" href="Page2.php">Page 2</a>
<a class="<?php echo (($var==3)?'active':'');?>" href="Page3.php">Page 3</a>
<a class="<?php echo (($var==4)?'active':'');?>" href="Page4.php">Page 4</a>
</div>
</div>
這是我的導航菜單。 目前只有 4 個項目並且 Class="Active" 代表活動頁面所以如果用戶在第 2 頁,導航上的第 2 頁將用該類突出顯示
這完全正常,但我必須從 PHP 轉移到 JavaScript
所以 HTML 行變成
<script type="text/javascript" src="PHP/Navigation.js"></script>
我可以通過window.location.href獲取當前 URL 如何將其傳遞給 JS 文件以及如何在 JS 文件(當前為 PHP 文件)中包含 HTML 內容?
我已經把所有的網絡鏈接放在 JS 文件的一個數組中。 那么接下來我該怎么做才能實現我使用 PHP 和 HTML 但使用 JavaScript 和 HTML 實現的相同目標。
我只需要導入導航菜單並使用 JavaScript 突出顯示當前站點
我花了一些時間來了解您的期望,但現在這是您的Navigation.js
var activeClass = new Array(4);
if(window.location.href.includes('Page1.php')) {
activeClass[0] = 'active';
} else if(window.location.href.includes('Page2.php')) {
activeClass[1] = 'active';
} else if(window.location.href.includes('Page3.php')) {
activeClass[2] = 'active';
} else if(window.location.href.includes('Page4.php')) {
activeClass[3] = 'active';
}
document.write('<div class="sidenav"><h5>JavaScript</h5>'+
'<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small" onclick="myAccFunc(1)">'+
' Main Heading <i class="fa fa-caret-down"></i></button><div id="1" class="w3-blue w3-hide w3-card" >');
document.write('<a class="'+activeClass[0]+'" href="Page1.php">Page 1</a>');
document.write('<a class="'+activeClass[1]+'" href="Page2.php">Page 2</a>');
document.write('<a class="'+activeClass[2]+'" href="Page3.php">Page 3</a>');
document.write('<a class="'+activeClass[3]+'" href="Page4.php">Page 4</a>');
document.write('</div></div>');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.