<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style>
body{
background-color:white;
}
.display{
background-color:pink;
}
</style>
<body>
<h2 style="color:green;">GeeksforGeeks</h2>
<div class="topics">
<ol>
<li><a href="#"><b>Searching</b></a>
<ul>
<li><a href="#">Linear Search</a></li>
<li><a href="#">Binary Serach</a></li>
</ul>
</li>
<li><a href="#"><b>Sorting</b></a>
<ul>
<li><a href="#">Bubble Sort</a></li>
<li><a href="#">Merge Sort</a>
<ul>
<li><a href="#"><i>Recursive Merge Sort</i></a></li>
<li><a href="#"><i>Iterative Merge Sort</i></a></li>
</ul>
</li>
<li><a href="#">Selection Sort</a></li>
<li><a href="#">Insertion Sort</a>
</ul>
</li>
<li><a href="#"><b>Tree</b></a>
<ul>
<li><a href="#">Binary Tree</a></li>
<li><a href=" #">Binary Search Tree</a></li>
</ul>
</li>
</ol>
</div>
<div class="display">
<div class="syllabus">
<a href="#">home / </a>
</div>
</div>
<script type="text/javascript">
$('.topics a').on('click', function() {
//해당 li를 클릭하면 li 복제 , syllabus <div>에 담긴다.
$select = $('<div class="syllabus"></div>');
$(this).parents('li').each(function(n, li) {
$select.prepend(' / ',$(li).children('a').clone());
});
// GeeksforGeeks에 링크 추가
$('.display').html(
$select.prepend('<a href="#syllabus">home</a>'));
})
</script>
</body>
</html>https://www.geeksforgeeks.org/how-to-create-dynamic-breadcrumbs-using-javascript/
How to create dynamic breadcrumbs using JavaScript? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
www.geeksforgeeks.org
'문제와 해결 > 자바스크립트' 카테고리의 다른 글
| 객체지향 프로그래밍 - 객체와함수,call,bind (0) | 2021.10.25 |
|---|---|
| 엔터키 이벤트가 먼저 실행이 안될때 (0) | 2021.08.03 |
| 리턴값이 함수일 때 주의점 (0) | 2021.07.06 |
| 이벤트 (0) | 2021.05.13 |
| 다크모드로 전환하기 (0) | 2021.05.09 |
