Javascript 如何在angular.js中对单击的li（选项卡）设置焦点/活动

我有一个选项卡列表，我试图将类设置为单击的列表项，但应仅为单击的项设置类，我的html如下所示：

 <div class="details-table">
    <ul class="table-toggle">
        <li class="active"><a href="" class="">Personal</a></li>
        <li><a href="" class="" >Professional</a></li>
    </ul>
    <div class="scrollable-table-box">
        <table>
              ...
        </table>
     </div>
  </div>

 .details-table {
     display: block;
     float: left;
     width: 100%;
 }
 .table-toggle {
     display: block;
     float: left;
     width: 100%;
     border-bottom: solid 5px #d9d9d9;
 }
 .table-toggle li {
     display: block;
     float: left;
     width: 220px;
     margin-right: 5px;
 }
 .table-toggle li a {
     color: #868686;
     display: block;
     font-size: 14px;
     padding: 15px 30px;
     text-align: center;
     text-decoration: none;
     text-transform: uppercase;
 }
 .table-toggle li:hover a,
 .table-toggle li.active a {
     background-color: #d9d9d9;
     color: #333;
     font-weight: 600;
 }

---

我想将焦点设置为单击的li项目，但我无法确定如何进行设置？我尝试使用ng click，但我不确定如何将焦点设置为其中的选定项目。

您可以应用ng类来确定活动项目，如下所示。在ng单击上设置activetab

<li ng-class="{active: activeTab == 'personal'}"><a href="#" ng-click="setActiveTab('personal')" class="">Personal</a></li>
<li ng-class="{active: activeTab == 'professional'}"><a href="#" ng-click="setActiveTab('professional')" class="" >Professional</a></li>

示例Plunker:

您可以尝试以下方法：

var m=[{ 是的， 国家：印度， 索引：2 }, { 选：错， 国家：英国， 索引：2 }, { 选：错， 国家：巴西， 索引：3 }, { 选：错， 国家：英国， 索引：1 }, { 选：错， 国家：美国， 索引：3 }, { 选：错， 国家：叙利亚， 索引：2 }] 函数MyCtrl$scope{ $scope.items=m； $scope.updateSelectedItem=functionitem{ m、 forEachfunctionrow{ row.isSelected=false； }; item.isSelected=true； } } .选定{ 背景：橙色 } 国际足联麦切摘要： {{i.country}:{{i.index}

---

为了实现这一点，您需要使用角度指令ng click和ng class

在您的表切换中，您可以稍微更改li的元素添加到ng类中，以检查活动li：

<ul class="table-toggle">
    <li ng-class="{'active':selected == 'tab1'}" ng-click="select('tab1')"><a href="" class="">Personal</a></li>
    <li ng-class="{'active':selected == 'tab2'}" ng-click="select('tab2')"><a href="" class="" >Professional</a></li>
</ul>

现场劫掠者：

---

希望对您有所帮助，祝您好运。

在您的对象isSelected中创建一个属性，并为单击列表设置为true，为rest重置它，并在此条件下添加ng类

<ul class="table-toggle">
    <li ng-class="{'active':selected == 'tab1'}" ng-click="select('tab1')"><a href="" class="">Personal</a></li>
    <li ng-class="{'active':selected == 'tab2'}" ng-click="select('tab2')"><a href="" class="" >Professional</a></li>
</ul>

$scope.selected = 'tab1';
  $scope.select = function(item){
     $scope.selected = item;
}