siblingsメソッドは、指定した要素の兄弟要素を全て選択します。
siblings
記法
$(selector).siblings();
============================
selector : 要素を指定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>siblingsメソッドについて</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<ul id="menu_list">
<li class="menu-list-item">ホーム</li>
<li class="menu-list-item" id="about">アバウト</li>
<li class="menu-list-item">サービス</li>
<li class="menu-list-item">お問い合わせ</li>
</ul>
<!-- CDN取得 -->
<script src="CDNのURL"></script>
<script src="./main.js"></script>
</body>
</html>// ページの読み込みが完了
$(function () {
// 初期状態で「アバウト」をハイライト
$("#about").css("background-color", "#a8dadc");
// 特定のリストアイテムがクリックされたとき
$(".menu-list-item").on("click", function () {
// すべてのメニューアイテムのスタイルをリセット
$(".menu-list-item").css("background-color", "#f0f0f0");
// クリックされたアイテムのスタイルを変更
$(this).css("background-color", "#a8dadc");
});
});/* リストの点を消す */
#menu_list {
list-style-type: none;
padding: 0;
margin: 0;
}
/* メニューアイテムの初期スタイル */
.menu-list-item {
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
cursor: pointer;
background-color: #f0f0f0;
}
/* 初期状態でアバウトのスタイル */
#about {
background-color: #a8dadc;
}出力結果
