如何使用按鈕欄作為導航選項卡

Question

使用令人敬畏的離子框架，我正在使用按鈕欄，如下圖所示：

在此處輸入圖片說明

但是我想要當我按下一個按鈕時，該按鈕應保持按下狀態，而其他按鈕應保持關閉狀態；當我按下第二個按鈕時，它仍將保持按下狀態，而其他按鈕則保持關閉狀態。

像這樣：

在此處輸入圖片說明

這是代碼：

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

Answer 1

我將使用ng-class更改按鈕。

只需創建一個活動按鈕類，然后在其中添加邏輯即可。

<div class="button-bar">
    <a class="button" ng-click="clicked(1)" ng-class="{'active': var == 1}">First</a>
    <a class="button" ng-click="clicked(2)" ng-class="{'active': var == 2}">Second</a>
    <a class="button" ng-click="clicked(3)" ng-class="{'active': var == 3}">Third</a>
</div>

並在控制器中：

$scope.clicked = function(num) {
    $scope.var = num;
}

這將使Angular中的按鈕“活動”。

Answer 2

這是CodePen的工作演示，復制粘貼在下面。 您可以通過單擊下面的Run code snippet按鈕直接在StackOverflow上運行此代碼示例。

注意：這不是通用的解決方案，但是應該使您朝着正確的方向發展。

 angular.module('mySuperApp', ['ionic']) .controller('MyCtrl',function($scope) { $scope.button = {}; $scope.button.first = {}; $scope.button.second = {}; $scope.button.third = {}; $scope.click = function(button){ $scope.button.first.clicked = false; $scope.button.second.clicked = false; $scope.button.third.clicked = false; button.clicked = true; }; });

 <html ng-app="mySuperApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body class="padding" ng-controller="MyCtrl"> <div class="button-bar"> <a class="button" ng-model="button.first" ng-click="click(button.first)" ng-class="button.first.clicked?'button-positive':'button-energized'">First</a> <a class="button" ng-model="button.second" ng-click="click(button.second)" ng-class="button.second.clicked?'button-positive':'button-energized'">Second</a> <a class="button" ng-model="button.third" ng-click="click(button.third)" ng-class="button.third.clicked?'button-positive':'button-energized'">Third</a> </div> </body> </html>

編輯：如果您想要像Shay建議的那樣更精簡的解決方案，可以在下面粘貼的CodePen示例上看到Ionic的完整實現。 主要區別在於單擊的函數無法像他一樣編寫，並且會產生錯誤。 無論如何，請選擇最適合您的解決方案。

 angular.module('mySuperApp', ['ionic']) .controller('MyCtrl',function($scope) { $scope.click = function(num) { $scope.var = num; } });

 <html ng-app="mySuperApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body class="padding" ng-controller="MyCtrl"> <div class="button-bar"> <a class="button" ng-click="click(1)" ng-class="{'button-positive':var==1}">First</a> <a class="button" ng-click="click(2)" ng-class="{'button-positive':var==2}">Second</a> <a class="button" ng-click="click(3)" ng-class="{'button-positive':var==3}">Third</a> </div> </body> </html>

Answer 3

我認為這可能對您有幫助：

演示

的HTML

  <a href="#" class="button" id="1">First</a>
  <a href="#" class="button" id="2">Second</a>
  <a href="#" class="button" id="3">Third</a>

的CSS

a
{
    text-decoration:none;
}

.button
{
    display:inline-block;
    padding:5px;
    height:20px;
    width:60px;
    text-align:center;
    background:#0CA68F;
    color:white;
}

.active
{
    background:#188171;
}

JS

$("a").click(function()
{
  $(".button").removeClass("active");   
  $("#" + this.id).addClass("active");
});

如何使用按鈕欄作為導航選項卡

問題描述

3 個解決方案

解決方案1
8 2015-05-26 20:25:34

解決方案2
2 2015-05-26 20:23:06

解決方案3
0 2015-05-26 20:16:00

如何使用按鈕欄作為導航選項卡

問題描述

3 個解決方案

解決方案1 8 2015-05-26 20:25:34

解決方案2 2 2015-05-26 20:23:06

解決方案3 0 2015-05-26 20:16:00

解決方案1
8 2015-05-26 20:25:34

解決方案2
2 2015-05-26 20:23:06

解決方案3
0 2015-05-26 20:16:00