AngularJS四按钮单击切换激活与内容切换异常问题排查

嘿，我看了你的代码和问题描述，现在帮你梳理下问题所在，以及怎么修复：

核心问题1：脚本加载顺序错误 #

你当前把自己的script.js放在了AngularJS库的前面，这就导致你的代码执行时，Angular还没被加载进来——模块和控制器的定义根本没被Angular正确注册。第一次点击按钮时，Angular甚至还没完成初始化，所以没反应；第二次点击时Angular已经加载好了，才能触发事件，这就是为什么需要双击才生效！

核心问题2：缺少内容互斥逻辑 #

你现在的代码是每个按钮独立控制自己对应内容的显示/隐藏，点击新按钮时不会关闭之前打开的内容，完全不符合你“点击另一按钮时隐藏原内容并显示新内容”的需求。

修复后的完整代码方案 #

HTML部分（修正加载顺序+添加高亮+互斥逻辑） #

<!DOCTYPE html>
<html ng-app="myapp">
<head>
  <link rel="stylesheet" href="style.css">
  <!-- 先加载AngularJS库，确保框架先初始化 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <!-- 再加载自定义脚本 -->
  <script src="script.js"></script>
</head>
<body ng-controller="toggle">
  <div>
    <!-- 用ng-class动态添加激活样式，ng-click设置当前激活标签 -->
    <button class="bttn" ng-click="activeTab='address'" ng-class="{'active': activeTab === 'address'}">Address</button>
    <button class="bttn" ng-click="activeTab='personal'" ng-class="{'active': activeTab === 'personal'}">Personal-details</button>
    <button class="bttn" ng-click="activeTab='bank'" ng-class="{'active': activeTab === 'bank'}">Bank-Account</button>
    <button class="bttn" ng-click="activeTab='assets'" ng-class="{'active': activeTab === 'assets'}">Asset</button>
  </div>
  <!-- 根据activeTab的值控制内容显示 -->
  <div ng-show="activeTab === 'address'">
    <h1>Address Content</h1>
  </div>
  <div ng-show="activeTab === 'bank'">
    <h1>Bank Account Content</h1>
  </div>
  <div ng-show="activeTab === 'assets'">
    <h1>Asset Content</h1>
  </div>
  <div ng-show="activeTab === 'personal'">
    <h1>Personal Details Content</h1>
  </div>
</body>
</html>

JS部分（简化状态管理） #

(function() {
  var app = angular.module('myapp', []);
  app.controller('toggle', function($scope) {
    // 默认激活第一个标签，也可以设为null让初始状态都隐藏
    $scope.activeTab = 'address';
  });
})();

CSS部分（实现按钮高亮效果） #

.bttn {
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bttn.active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

修复说明 #

1. 修正加载顺序：把AngularJS库放在自定义脚本前面，确保你的模块和控制器能被正确注册，单击事件就能立即触发。
2. 简化状态管理：用单个activeTab变量替代多个独立的Ishide_xxx，逻辑更简洁，天然实现了标签互斥——同一时间只有一个标签处于激活状态。
3. 添加高亮样式：通过ng-class动态给当前激活的按钮添加样式，满足你“按钮高亮”的需求。
4. 内容自动切换：用ng-show根据activeTab的值控制内容显示，点击新按钮时自动隐藏旧内容，展示新内容，完全符合你的预期效果。

内容的提问来源于stack exchange，提问作者SRK