CODEWITHSUNDEEP
javascripthtmlangularjs
Jagan
Jagan

Reputation: 111

customize the code for tab view with using href

Actual html file

It is coded for table but i need it for anchor

    <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 file

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

The above code are the actual code but i want to customize it for my below code

html file

it is my code for tab view in ionic

<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>

Upvotes: 1

Views: 44

Answers (1)

Keerthana Prabhakaran
Keerthana Prabhakaran

Reputation: 3787

Here is the fiddle!

.red
{
 background-color:red;
}
<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>

Hope it helps!

Upvotes: 1

Related Questions