在 Web 开发中，选项卡是一种常见的用户界面元素。为了提高用户体验，我们通常需要设置一个选项卡为活动状态，并突出显示它。本文将介绍如何使用 AngularJS 实现这个功能。
HTML 结构
首先，我们需要在 HTML 中定义选项卡的结构。通常情况下，选项卡是通过一组链接和相应的内容组成的。
---- -------------- -----------------------
--- ---------- ----------
--- -------------- -- ----- ------------------ -------------
-- ------- -------------------------------------------
-----
-----
---- --------------------
---- -------------- -- ----- ---------------------
---------------
------
------
------上面的代码中，我们使用了 Bootstrap 的样式，但这并不是必须的。ng-repeat 指令用于循环遍历选项卡数组，并根据条件设置每个选项卡的样式。
控制器
接下来，我们需要编写控制器来管理选项卡的状态。控制器负责设置默认的活动选项卡，并在用户点击选项卡时更新状态。
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - -
------- ------- -------- ------------ ------- ------
------- ------- -------- ------------ ------- -------
------- ------- -------- ------------ ------- ------
--
---------------- - ------------- -
---------------------------- ----------- -
-------- - ------
---
---------- - -----
--
---在控制器中，我们首先定义了一个选项卡数组，其中包含了三个选项卡。在默认情况下，第一个选项卡被设置为活动状态。
setActive 函数用于处理用户点击事件。它首先使用 angular.forEach 遍历选项卡数组，并将所有选项卡的状态设置为非活动状态。然后，它将传递进来的选项卡对象的状态设置为活动状态。
CSS 样式
最后，我们需要编写 CSS 样式来突出显示活动选项卡。
--------- --------- - - ----------------- -------- ------ ----- -
在上面的代码中，我们使用了 Bootstrap 的样式，但也可以根据需要进行修改。
示例演示
下面是一个完整的示例，您可以在浏览器中运行它以查看效果：
--------- -----
----- ---------------
------
----- ----------------
--------------------
----- ---------------- ---------------------------------------------------------------
------- -----------------------------------------------------------------
-------
--------- --------- - -
----------------- --------
------ -----
-
--------
-------
----- -----------------------
--- ---------- ----------
--- -------------- -- ----- ------------------ -------------
-- ------- -------------------------------------------
-----
-----
---- --------------------
---- -------------- -- ----- ---------------------
---------------
------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------