Tôi đang làm việc với js góc và bootstrap 3 và ứng dụng của tôi hoạt động như ... Tôi có chế độ xem nơi bạn có một số liên kết cho phép bạn hiển thị div với nhiều tab và chọn một của họ. Điều này hoạt động tốt. Nhưng nếu tôi thay đổi tab thông qua một nhấp chuột qua nó và sau đó tôi ẩn chế độ xem với các tab khi tôi nhấp vào một lần nhấp khác, tôi hiển thị chế độ xem với các tab, với tab được chọn từ liên kết, điều đó đúng, nhưng ... với tab trước đã được nhấp.Bootstrap 3: Bỏ chọn tab bằng cách sử dụng js góc
Vì vậy, làm cách nào tôi có thể bỏ chọn tab mà tôi đã thực hiện nhấp vào tab đó?
Sửa 1:
tôi sẽ gửi vài ảnh chụp màn hình để cố gắng giải thích rõ hơn vấn đề của tôi.
Chỉnh sửa 2:
Tôi thêm plunker này để hiển thị cách mã hoạt động và bạn có thể kiểm tra xem bạn có bấm vào tab hay không, nếu sau đó trả về một nút bạn không chọn đúng tab. https://plnkr.co/edit/y22T01OwxgttDWM1mJeH
HTML:
<body ng-controller="MainCtrl as ctrl">
<button id="bTab1" ng-click="ctrl.buttonClicked($event)">
Tab 1
</button>
<button id="bTab2" ng-click="ctrl.buttonClicked($event)">
Tab 2
</button>
<button id="bTab3" ng-click="ctrl.buttonClicked($event)">
Tab 3
</button>
<div ng-show = "ctrl.show_tabs">
<div class = "row" style = "text-align: right; margin-top: 10px">
<button ng-click="ctrl.closeTab()">
Hide Tabs
</button>
</div>
<ul class="nav nav-tabs" id="myTab">
<li ng-class = "ctrl.active_pai"><a data-target="#pai" data-toggle="tab">PAI</a></li>
<li ng-class = "ctrl.active_pap"><a data-target="#pap" data-toggle="tab">PAP</a></li>
<li ng-class = "ctrl.active_ip"><a data-target="#ip" data-toggle="tab">IP</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" ng-class = "ctrl.active_pai" id="pai">Content PAI</div>
<div class="tab-pane" ng-class = "ctrl.active_pap" id="pap">Content PAP</div>
<div class="tab-pane" ng-class = "ctrl.active_ip" id="ip">Content IP</div>
</div>
</div>
</body>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var self = this;
$scope.name = 'World';
self.show_tabs = false;
self.active_pai = "";
self.active_pap = "";
self.active_ip = "";
self.buttonClicked = function(event) {
self.show_tabs = true;
if (event.currentTarget.id == "bTab1"){
self.active_pai = "active";
self.active_pap = "";
self.active_ip = "";
}
if (event.currentTarget.id == "bTab2"){
self.active_pai = "";
self.active_pap = "active";
self.active_ip = "";
}
if (event.currentTarget.id == "bTab3"){
self.active_pai = "";
self.active_pap = "";
self.active_ip = "active";
}
};
self.closeTab = function(){
self.show_tabs = false;
}
});
Sửa 3:
Nhiều vấn đề:
tabTrong mã của tôi, tôi đã có và Bootstrap lịch và với giải pháp đã cho w orks tốt mà không có lịch bootstrap, nhưng nếu thêm lịch bootstrap, điều này không hoạt động chính xác.
tôi đã sửa đổi plunker origina của tôi và tôi đã thêm một lịch bootstrap và thay đổi các thư viện:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
Bằng cách này:
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>
Mã của các thư viện này bạn đã có trên plunker. Thêm vào đó tôi đã thêm bộ điều khiển quản lý lịch bootstrap.
Ok, Nếu chúng ta đi đến plunker: https://plnkr.co/edit/PaSqa0jxQjz48pzcmBMa
Chúng ta có thể thấy rằng chúng ta có một lịch bootstrap nơi tôi không thể chọn ngày lớn hơn ngày nay + 1. Đó là đúng! Nhưng, nếu tôi thực hiện một nhấp chuột vào nút "Tab 2", Tab mà chúng ta có thể nhìn thấy không phải là 2, đó là 1. Nếu tôi làm tương tự với tab 3, tôi đã có kết quả tương tự. Sai rồi.Chức năng chính xác là nếu tôi thực hiện một nút bấm vào "Tab 2", chúng ta có thể thấy tab 2, ví dụ.
Ok, Nếu tôi thay đổi trên plunker các thư viện ...
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.14.3.min.js"></script>
Đến đưa ra trong các giải pháp:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
Chúng ta có thể thấy rằng các tab hoạt động chính xác, nhưng lịch bootstrap cho phép bạn chọn ngày lớn hơn ngày hôm nay + 1. Và điều này là sai!
Vì vậy, câu hỏi khó hiểu. Bạn có thể làm cho một plunker? –
Hoặc thêm ảnh chụp màn hình của tab trong điều bạn đã đề cập. Tôi chắc chắn rằng một cái gì đó đơn giản của nó đủ, có thể là một đoạn mã mà bạn xử lý thay đổi nội dung div và một ảnh chụp màn hình trước và sau sẽ là một khởi đầu tốt. – Jeremy
OK. Trước tiên, tôi đăng một số ảnh chụp màn hình và sau đó tôi sẽ cố gắng để làm cho một plunker. Cảm ơn câu trả lời của bạn!!! –