jQuery：在特定情況下“.hasClass()”function 有問題

Question

這是我的 web 項目的一部分：

 var $nav = $('#nav'), $links = $('li a'); $links.click(function() { $links.removeClass("active"); // This will be removed. $(this).addClass("active"); // This will be removed. var left = this.getBoundingClientRect().left, scrollLeft = $nav.scrollLeft(); $nav.scrollLeft(left + scrollLeft); });

 ::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; scrollbar-width: none; font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-size: 34px; color: inherit; text-decoration: none; } #box { background-color: grey; height: 300px; width: 300px; overflow-y: auto; scroll-behavior: smooth; } #nav { position: fixed; width: 300px; display: flex; white-space: nowrap; color: white; overflow-y: auto; z-index: 1; scroll-behavior: smooth; } li { margin-right: 30px; }.item { width: 100%; padding: 20px; }.item-content { height: 200px; background-color: darkgrey; }.active { background-color: black; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"> <ul id="nav"> <li><a href="#one" class="active">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#four">Four</a></li> <li><a href="#five">Five</a></li> <li><a href="#six">Six</a></li> </ul> <div id="items"> <div class="item" id="one"> <div class="item-content">One</div> </div> <div class="item" id="two"> <div class="item-content">Two</div> </div> <div class="item" id="three"> <div class="item-content">Three</div> </div> <div class="item" id="four"> <div class="item-content">Four</div> </div> <div class="item" id="five"> <div class="item-content">Five</div> </div> <div class="item" id="six"> <div class="item-content">Six</div> </div> </div>

我將使用另一個 function 來確定哪個鏈接是active的。 所以$links.removeClass("active"); 和$(this).addClass("active"); 將被刪除。

這個function應該只判斷導航的水平滾動position。

我需要這樣的東西：

 var $nav = $('#nav'); if ($('li a').hasClass('active')) { var left = this.getBoundingClientRect().left, scrollLeft = $nav.scrollLeft(); $nav.scrollLeft(left + scrollLeft); });

不幸的是，這不起作用。

您可以嘗試使用此代碼：

 var $nav = $('#nav') if ($("#nav li a").hasClass('active')) { var left = this.getBoundingClientRect().left, scrollLeft = $nav.scrollLeft(); $nav.scrollLeft(left + scrollLeft); }

 ::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; scrollbar-width: none; font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font-size: 34px; color: inherit; text-decoration: none; } #box { background-color: grey; height: 300px; width: 300px; overflow-y: auto; scroll-behavior: smooth; } #nav { position: fixed; width: 300px; display: flex; white-space: nowrap; color: white; overflow-y: auto; z-index: 1; scroll-behavior: smooth; } li { margin-right: 30px; }.item { width: 100%; padding: 20px; }.item-content { height: 200px; background-color: darkgrey; }.active { background-color: black; left: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"> <ul id="nav"> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three" class="active">Three</a></li> <li><a href="#four">Four</a></li> <li><a href="#five">Five</a></li> <li><a href="#six">Six</a></li> </ul> <div id="items"> <div class="item" id="one"> <div class="item-content">One</div> </div> <div class="item" id="two"> <div class="item-content">Two</div> </div> <div class="item" id="three"> <div class="item-content">Three</div> </div> <div class="item" id="four"> <div class="item-content">Four</div> </div> <div class="item" id="five"> <div class="item-content">Five</div> </div> <div class="item" id="six"> <div class="item-content">Six</div> </div> </div>

在這種情況下，導航應該滾動到鏈接“三”。 為什么它不起作用？

有人可以幫我嗎？ 將非常感謝！

Answer 1

我相信你的javascript應該是這樣的

var $nav = $('#nav')

var active = $("#nav li a.active")[0];
var left = active.getBoundingClientRect().left,
    scrollLeft = $nav.scrollLeft();
$nav.scrollLeft(left + scrollLeft);