【Html】基於Bootstrap實現導航欄切換
阿新 • • 發佈：2021-11-04
參考資料：
實現效果
主頁面index.html
子頁面home1.html、home2.html、home3.html
<!DOCTYPE html> <html> <head> <title>Test</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題檔案（一般不用引入） --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <ul class="nav nav-pills nav-tabs" > <li role="presentation" lass="active"><a href="home1.html" target="myIframe">首頁</a></li> <li role="presentation"><a href="home2.html" target="myIframe">選單</a></li> <li role="presentation"><a href="home3.html" target="myIframe">關於</a></li> </ul> </head> <body> <div class="container"> <iframe style="width: 100%;height: 600px" name="myIframe"><h1>Hello</h1></iframe> </div> </body> </html>
home1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這裡是首頁</h1>
</body>
</html>
home2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>這裡是選單</h1> </body> </html>
home3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這裡是關於</h1>
</body>
</html>