在 div 中滾動部分時將活動 class 添加到菜單 li
[英]Add active class to menu li on scrolling through section in div
問題描述
在下面的一組代碼中，基於選擇左側的 .help-menu 元素。help-descr div 導航到特定部分。 同樣，在滾動 the.help-descr div 時，我想將活動的 class 選擇添加到 appropriate.help-menu 元素
這是我嘗試過的：
它類似於滾動到 div 時附加的鏈接 Add Menu Active Class我無法在此處復制相同的方法
幫助.js
// on load of page $(function() { $('.backend-feature li:first').addClass('active'); $('.backend-head').addClass('active'); $('.selected-item').empty(); $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li:first').text() + '</span'); }); //on click of backend feature menu $(".backend-feature-li").on('click', function() { $('.frontend-head').removeClass('active'); $('.frontother-head').removeClass('active'); $('.frontend-feature li').find('a').removeClass('active'); $('.front-otherfeature-li').find('a').removeClass('active'); $(this).siblings().find('a').removeClass('active'); $('.backend-head').addClass('active'); $(this).find('a').addClass('active'); $('.selected-item').empty(); $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span'); }); // on click of frontend feature menu $(".frontend-feature-li").on('click', function() { $('.backend-head').removeClass('active'); $('.frontother-head').removeClass('active'); $('.backend-feature li').find('a').removeClass('active'); $('.front-otherfeature-li').find('a').removeClass('active'); $(this).siblings().find('a').removeClass('active'); $('.frontend-head').addClass('active'); $(this).find('a').addClass('active'); $('.selected-item').empty(); $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span'); }); //on click of frontend other features menu $(".front-otherfeature-li").on('click', function() { $('.backend-head').removeClass('active'); $('.backend-feature li').find('a').removeClass('active'); $('.frontend-feature-li').find('a').removeClass('active'); $(this).siblings().find('a').removeClass('active'); $('.frontend-head').addClass('active'); $('.frontother-head').addClass('active'); $(this).find('a').addClass('active'); $('.selected-item').empty(); $('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span'); });
.ion-help-circled { cursor: pointer; }.help-row { flex-wrap: nowrap; max-width: 100%; }.help-menu { background-color: #efefef; overflow: auto; padding: 15px; height: 85vh; }.help-descr { position: relative; background-color: white; padding: 25px 25px; overflow: auto; height: calc(100vh - 107px); border: 1px solid #efefef; }.help-menu ul.front-otherfeature-li { margin-left: 18px; }.help-menu ul li { list-style-type: none; margin: 8px; }.help-menu ul.backend-head, .help-menu ul.frontend-head { margin-left: 0px; }.backend-feature li a, .frontend-feature li a, .frontend-otherfeature li a { padding: 0; text-decoration: none; color: black; }.help-menu li.active { font-weight: bold; }.help-menu a:hover { font-weight: bold; }.main-section { background-color: white; } section { display: flex; flex-direction: column; padding-bottom: 15px; } article { display: flex; flex-direction: column; padding-left: 30px; }.main-section ul>li { margin-top: 6px; }.main-section p { margin-bottom: 0px; }.backend-feature-arrow, .frontend-feature-arrow, .other-feature-arrow { margin-right: 6px; cursor: pointer; }.selected-item span { padding: 6px; }.descr-seclevel { list-style-type: square; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'"> <link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="./css/style:css"> <link src="http.//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="./vendors/css/ionicons.min.css"> <script defer src="./js/help_page:js"></script> <title>Revive</title> </head> <body> <div id="header"> <div class="dashboard-header"> <div class="dashboard-left-header"> <ul style="margin-bottom; 0px:"> <li> <a style="cursor; default." class="logo" href=""><img src="./assets/img/img1:png"></img> </a> </li> </ul> </div> </div> </div> <div class="row help-row"> <div class="col-sm-3 help-menu"> <ul> <li style="font-weight; bold:">Supported Features</li> <li> <ul> <li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size;18px:display:inline-block"></i>Backend</li> <li> <ul class="backend-feature"> <li class="backend-feature-li"><a href="#datasource" id="backend-first">Datasources</a></li> <li class="backend-feature-li"><a href="#joins">Joins</a></li> </ul> </li> <li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size;18px:display:inline-block"></i>Frontend</li> <li> <ul class="frontend-feature"> <li class="frontend-feature-li"><a href="#properties">Properties</a></li> <li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size;18px:display:inline-block"></i>Other Features</li> <li> <ul class="frontend-otherfeature"> <li class="front-otherfeature-li"><a href="#actions">Actions</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div class="col-sm-9 help-descr"> <div class='selected-item'></div> <section class="main-section" id="datasource"> <header> <h1>Datasources</h1> </header> <article> <p>The supported Datasources:</p> <ul class="descr-firstlevel" style="margin-left; 20px:"> <li>Excel</li> <li>Csv</li> <li>Oracle Database</li> <li>MSSQL server</li> <li>PostgreSQL</li> <li>MySQL</li> </ul> </article> </section> <section class="main-section" id="joins"> <header> <h1>Joins</h1> </header> <article> <p>The supported Joins:</p> <ul class="descr-firstlevel" style="margin-left; 20px:"> <li>Inner Join</li> <li>Left Join</li> <li>Right Join</li> <li>Full Outer Join</li> </ul> </article> </section> <section class="main-section" id="properties"> <header> <h1>Properties</h1> </header> <article> <p>The supported Properties:</p> <ul class="descr-firstlevel" style="margin-left; 20px,"> <li>Titles on charts</li> <li>X-axis and Y-axis Titles will be renamed</li> <li>Text Properties like font style:size and color</li> <li>Background color</li> <li>Grid lines</li> <li>Borders for charts</li> <li>Alias name for values</li> <li>Legends will be enabled only if present</li> <li>Color of Chart:</li> <ul class="descr-seclevel" style="margin-left; 20px:"> <li>If color is applied it will be added else default color is applied</li> <li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li> </ul> </ul> </article> </section> <section class="main-section" id="actions"> <header> <h1>Actions</h1> </header> <article> <p>Actions supported:</p> <ul class="descr-firstlevel" style="margin-left; 20px;"> <li>Only on-select is supported</li> <li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li> </ul> </article> </section> </div> </div> </body> </html>
1 個解決方案
解決方案1
2 已采納 2021-09-28 08:57:40
如果你在每個主要部分上放置一個 IntersectionObserver，系統會告訴你它何時進入視圖或離開視圖。
然后您可以從菜單中的相關鏈接添加或刪除活動的 class。
這個片段給出了一個演示，但它必須縮短菜單區域的總長度，這樣我們才能看到下面的內容，它也修復了它，否則它會向上滾動，並且無法看到添加活動 class 的效果菜單項不在屏幕上。
為了清楚地表明哪些部分在視圖中，已在鏈接上放置了石灰背景。
請注意，需要考慮“活動”的實際含義，因為視口中可以同時顯示多個部分。 這段代碼並不試圖解決這個問題——它在這個問題的 scope 之外。
該片段需要整頁查看。
const callback = (entries, observer) => { entries.forEach(entry => { const id = entry.target.id; const el = document.body.querySelector('[href="#' + id + '"]'); if (entry.isIntersecting) { el.classList.add('active'); } else { el.classList.remove('active'); } }); }; const sections = document.querySelectorAll('.main-section'); const options = { threshold: 0.33 }; const observer = new IntersectionObserver(callback, options); sections.forEach(section => { observer.observe(section); });
.ion-help-circled { cursor: pointer; }.help-row { flex-wrap: nowrap; max-width: 100%; }.help-menu { background-color: #efefef; overflow: auto; padding: 15px; height: 85vh; height: 30vh; /* changed for demo so we can see stuff */ }.help-descr { position: relative; background-color: white; padding: 25px 25px; overflow: auto; height: calc(100vh - 107px); border: 1px solid #efefef; }.help-menu ul.front-otherfeature-li { margin-left: 18px; }.help-menu ul li { list-style-type: none; margin: 8px; }.help-menu ul.backend-head, .help-menu ul.frontend-head { margin-left: 0px; }.backend-feature li a, .frontend-feature li a, .frontend-otherfeature li a { padding: 0; text-decoration: none; color: black; }.help-menu li.active { font-weight: bold; background-color: lime; /* ADDED JUST FOR DEMO */ }.help-menu a:hover { font-weight: bold; }.main-section { background-color: white; } section { display: flex; flex-direction: column; padding-bottom: 15px; } article { display: flex; flex-direction: column; padding-left: 30px; }.main-section ul>li { margin-top: 6px; }.main-section p { margin-bottom: 0px; }.backend-feature-arrow, .frontend-feature-arrow, .other-feature-arrow { margin-right: 6px; cursor: pointer; }.selected-item span { padding: 6px; }.descr-seclevel { list-style-type: square; }
<div style="position: fixed; z-index: 1;"> <:-- added just for demo --> <div id="header"> <div class="dashboard-header"> <div class="dashboard-left-header"> <ul style="margin-bottom; 0px:"> <li> <a style="cursor; default." class="logo" href=""><img src="./assets/img/img1:png"></img> </a> </li> </ul> </div> </div> </div> <div class="row help-row"> <div class="col-sm-3 help-menu"> <ul> <li style="font-weight; bold:">Supported Features</li> <li> <ul> <li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size;18px:display:inline-block"></i>Backend</li> <li> <ul class="backend-feature"> <li class="backend-feature-li"><a href="#datasource" id="backend-first">Datasources</a></li> <li class="backend-feature-li"><a href="#joins">Joins</a></li> </ul> </li> <li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size;18px:display:inline-block"></i>Frontend</li> <li> <ul class="frontend-feature"> <li class="frontend-feature-li"><a href="#properties">Properties</a></li> <li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size;18px:display:inline-block"></i>Other Features</li> <li> <ul class="frontend-otherfeature"> <li class="front-otherfeature-li"><a href="#actions">Actions</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> <:--ADDED --> <div class="col-sm-9 help-descr"> <div class='selected-item'></div> <section class="main-section" id="datasource"> <header> <h1>Datasources</h1> </header> <article> <p>The supported Datasources;</p> <ul class="descr-firstlevel" style="margin-left: 20px:"> <li>Excel</li> <li>Csv</li> <li>Oracle Database</li> <li>MSSQL server</li> <li>PostgreSQL</li> <li>MySQL</li> </ul> </article> </section> <section class="main-section" id="joins"> <header> <h1>Joins</h1> </header> <article> <p>The supported Joins;</p> <ul class="descr-firstlevel" style="margin-left: 20px:"> <li>Inner Join</li> <li>Left Join</li> <li>Right Join</li> <li>Full Outer Join</li> </ul> </article> </section> <section class="main-section" id="properties"> <header> <h1>Properties</h1> </header> <article> <p>The supported Properties;</p> <ul class="descr-firstlevel" style="margin-left, 20px:"> <li>Titles on charts</li> <li>X-axis and Y-axis Titles will be renamed</li> <li>Text Properties like font style:size and color</li> <li>Background color</li> <li>Grid lines</li> <li>Borders for charts</li> <li>Alias name for values</li> <li>Legends will be enabled only if present</li> <li>Color of Chart;</li> <ul class="descr-seclevel" style="margin-left: 20px:"> <li>If color is applied it will be added else default color is applied</li> <li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li> </ul> </ul> </article> </section> <section class="main-section" id="actions"> <header> <h1>Actions</h1> </header> <article> <p>Actions supported;</p> <ul class="descr-firstlevel" style="margin-left: 20px;"> <li>Only on-select is supported</li> <li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li> </ul> </article> </section> </div> </div>
將活動班級添加到菜單部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.