Q&A
質問ではなく作業依頼になっています。
ナビゲーションバーのみ内容を変更してページの本文はそのまま維持したい
参考例としてはクラウドワークスさんのナビゲーションバーのようにしたいです
参考ページ［クラウドワークス］
Headerphp
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8</head> 9<link href="css/bootstrap.css" rel="stylesheet"> 10<body> 11<!-- メインナビゲーションバー --> 12<nav class="navbar navbar-expand-sm bg-color p-3"> 13 <a class="navbar-brand moji fs-2" href="#">AdvancedCloud(仮)</a> 14 <div class="collapse navbar-collapse justify-content-center" id="navbarNav4"> 15 <ul class="navbar-nav"> 16 <li class="nav-item active m-2"> 17 <a class="nav-link text-white btn btn-secondary" href="#">オススメの仕事</span></a> 18 </li> 19 <li class="nav-item m-2"> 20 <a class="nav-link text-white btn btn-info" href="#">仕事をさがす</a> 21 </li> 22 </ul> 23 </div> 24</nav> 25<!-- サブナビゲーションバー --> 26<nav class="navbar navbar-expand-sm bg-primarys p-sub"> 27 <div class="collapse navbar-collapse justify-content-center" id="navbarNav4"> 28 <ul class="navbar-nav"> 29 <li class="nav-item mx-md-2 mx-1 sub-li"> 30 <a class="nav-link text-white" href="#">マイページ</span></a> 31 </li> 32 <li class="nav-item mx-md-2 mx-1 sub-li"> 33 <a class="nav-link text-white" href="#">マイリスト</a> 34 </li> 35 <li class="nav-item mx-md-2 mx-1 sub-li"> 36 <a class="nav-link text-white" href="#">応募リスト</a> 37 </li> 38 <li class="nav-item mx-md-2 mx-1 sub-li"> 39 <a class="nav-link text-white" href="#">契約リスト</a> 40 </li> 41 <li class="nav-item mx-md-2 mx- sub-li"> 42 <a class="nav-link text-white" href="#">報酬</a> 43 </li> 44 <li class="nav-item mx-md-2 mx- sub-li"> 45 <a class="nav-link text-white" href="#">メッセージ</a> 46 </li> 47 <li class="nav-item dropdown mx-md-2 mx-sm-1"> 48 <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 49 受注者メニュー 50 </a> 51 <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> 52 <li><a class="dropdown-item" href="Header2.php">発注者メニュー</a></li> 53 </ul> 54 </li> 55 </ul> 56</nav> 57 58<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 59</body> 60</html>
これをrequireしたサイト内のドロップダウンメニューで発注者メニューを選択するとナビゲーションバーの内容のみ(下記の内容に)変更したいのですがscriptのコードがわからないのでご教授ください????
heder2php
1 2<!-- サブナビゲーションバー --> 3<nav class="navbar navbar-expand-sm bg-primarys p-sub"> 4 <div class="collapse navbar-collapse justify-content-center" id="navbarNav4"> 5 <ul class="navbar-nav"> 6 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 7 <a class="nav-link text-white" href="#">マイページ</span></a> 8 </li> 9 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 10 <a class="nav-link text-white" href="#">仕事を依頼</a> 11 </li> 12 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 13 <a class="nav-link text-white" href="#">仕事管理</a> 14 </li> 15 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 16 <a class="nav-link text-white" href="#">ワーカーリスト</a> 17 </li> 18 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 19 <a class="nav-link text-white" href="#">支払い</a> 20 </li> 21 <li class="nav-item mx-md-2 mx-sm-1 sub-li"> 22 <a class="nav-link text-white" href="#">メッセージ</a> 23 </li> 24 <li class="nav-item dropdown"> 25 <a class="nav-link dropdown-toggle mx-md-2 mx-sm-1 text-white" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 26 発注者メニュー 27 </a> 28 <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink"> 29 <li><a class="dropdown-item" href="Header.php">受注者メニュー</a></li> 30 </ul> 31 </li> 32 </ul> 33</nav>
回答1件
0
調べてやってみます。
投稿2021/05/20 12:46
総合スコア2
あなたの回答
tips
プレビュー
