jQuery slideTo 与组合属性

Question

我正在尝试定位一个特定的div，其中包含将在整个页面中导航用户的链接。

我拥有的代码是：

$(document).on('click', 'a[href^="#"]', function(e) { // [id='faqNav']?
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});

a[href^="#"]正在影响我在页面上的手风琴，所以我正在尝试找出一种方法来选择我拥有的div中的链接.链接在一个列表中，我想我会给列表一个id，希望代码只会单独影响里面的hrefs。我尝试了a[href^="#"][id='faqNav']但它影响了页面上的所有hrefs。

不知道如何单独针对此。以下是我尝试定位的列表示例：

<ul id="faqNav">
<li href="#link1">A</li>
<li href="#link2">B</li>
<li href="#link3">C</li>
</ul>

Answer 1

<li>

列表项不接受可用于<a>、<base>、<area>或<link>的href属性。 在这种情况下，最好的替代方法是添加自定义数据属性。就像这个例子中的data-link

解决方案1：遵循您的HTML代码

$("#faqNav li").on('click',function(e) {
// target element id
var id = $(this).data('link');
console.log(id);
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li data-link="#link1">A</li>
<li data-link="#link2">B</li>
<li data-link="#link3">C</li>
</ul>

解决方案 2：使用链接的常规使用

$("#faqNav a").on('click',function(e) {
// target element id
var id = $(this).attr('href');
console.log(id);
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li><a href="#link1">A</a></li>
<li><a href="#link2">B</a></li>
<li><a href="#link3">C</a></li>
</ul>

解决方案3：哈希旁边的数据属性

$("#faqNav a").on('click',function(e) {
// target element id
var id = $(this).data('link');
console.log(id);
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="faqNav">
<li><a href="#" data-link="#link1">A</a></li>
<li><a href="#" data-link="#link2">B</a></li>
<li><a href="#" data-link="#link3">C</a></li>
</ul>

这取决于您的设计要求、文档定位点 (id( 和导航需求。使用有效的 ID，您可以使用它来控制页面加载，就像在您的页面.html#link1 中一样。因此，优先级转到有效的 HTML，然后我们可以自定义并防止默认值......