Bootstrap是一个流行的前端框架，提供了许多UI组件和功能来加速开发。其中，Bootstrap Tabs组件被广泛应用于创建选项卡界面。然而，有些开发者可能会遇到一个问题：当使用data-target属性代替href属性指定选项卡目标时，选项卡无法正常工作。
问题原因
在Bootstrap Tabs组件中，每个选项卡都表示为一个链接元素(<a>标签)，并通过href属性指定要显示的内容区域（一般是一个<div>）。例如：
--- ---------- ----------
--- -----------------
-- --------------- ------- ---------------------
-----
--- -----------------
-- ---------------- ---------------------------
-----
-----
---- --------------------
---- --------- --------------- ---- ---- --------
------- ------- ---- ---------
------
---- ------------ --------------- ------
---------- ------- ---- ---------
------
------在这个示例中，每个选项卡都有一个href属性，它们分别对应了id属性为“home”和“profile”的<div>元素。当用户点击一个选项卡时，浏览器会自动滚动到相应的位置，以显示对应的内容区域。
然而，有些开发者可能会尝试使用data-target属性替换href属性来指定选项卡目标，例如：
--- ---------- ----------
--- -----------------
-- --------------- ------- ----------------- ----------------------------
-----
--- -----------------
-- ---------------- ----------------- ----------------------------------
-----
-----
---- --------------------
---- --------- --------------- ---- ---- --------
------- ------- ---- ---------
------
---- ------------ --------------- ------
---------- ------- ---- ---------
------
------这时，虽然点击选项卡可以修改URL中的hash值，但是浏览器不会自动滚动到对应的内容区域，导致用户看不到新的选项卡内容。造成这个问题的原因在于，当使用data-target属性时，Bootstrap Tabs组件无法自动滚动到相应的内容区域。
解决方案
为了解决这个问题，我们需要手动滚动到选项卡对应的内容区域。可以通过JavaScript监听选项卡的点击事件，并使用jQuery的scrollTop()方法滚动到对应的内容区域。
以下是一个示例代码：
--- ---------- ----------
--- -----------------
-- --------------- ------- ----------------- ----------------------------
-----
--- -----------------
-- ---------------- ----------------- ----------------------------------
-----
-----
---- --------------------
---- --------- --------------- ---- ---- --------
------- ------- ---- ---------
------
---- ------------ --------------- ------
---------- ------- ---- ---------
------
------
--------
-------------------------------------------- -------- --- -
--- ------ - --------------------------------
-- -------- -
-------- ----------------
---------- ----------------------
-- -----
-
---
---------在这个示例中，我们使用jQuery的on()方法监听
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30068