使用href自定义选项卡视图的代码

时间:2017-02-25 06:26:30

标签: javascript html angularjs

实际的html文件

它是为表编码但我需要它用于锚

    <table>
    <tr>
        <td>click me</td>
    </tr>
    <tr>
        <td>click me</td>
    </tr>
    <tr>
        <td>click me</td>
    </tr>
    <tr>
        <td>click me</td>
    </tr>
    <tr>
        <td>click me</td>
    </tr>
</table>

的script.js

var rows = document.getElementsByTagName('tr');

function rowHighlight() {
    var selectedRows = document.getElementsByClassName('selected');

    for (var n = 0; n < selectedRows.length; n++) {
        selectedRows[n].className = '';
    }
    this.className = 'selected'
}

for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', rowHighlight);
}

css文件

.selected {
    background-color:red;
}
table:hover {
    cursor:pointer;
}

以上代码是实际代码,但我想为我的下面的代码自定义

html文件

这是我在离子

中的标签视图的代码
<div class="tabs">
      <a ng-class="tab-item" ng-click="a('top')">
        Top News
      </a>
      <a ng-class="tab-item" ng-click="a('latest')">
        Latest News
      </a>
      <a ng-class="tab-item" ng-click="a('popular')">
        Popular News
      </a>
    </div>
    <div>

1 个答案:

答案 0 :(得分:1)

这是小提琴!

&#13;
&#13;
.red
{
 background-color:red;
}
&#13;
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
<div class="tabs" ng-app>
      <a  ng-class='{"red":tog==1}' ng-click='tog=1'>
        Top News
      </a><br/>
      <a  ng-class='{"red":tog==2}' ng-click='tog=2'>
        Latest News
      </a><br/>
      <a  ng-class='{"red":tog==3}' ng-click='tog=3'>
        Popular News
      </a>
    </div>
&#13;
&#13;
&#13;

希望它有所帮助!