Javascript 根据用户输入显示或隐藏元素

我想根据URL显示或隐藏选项卡（Tab3）

演示：

示例）当用户登录应用程序时，应显示前两个选项卡（Tab1、Tab2），隐藏Tab3，并且当用户键入所有选项卡（Tab1、Tab2、Tab3）时，应显示所有选项卡。关于如何根据用户输入的URL路径显示或隐藏选项卡的任何输入

示例代码：

<div ng-app="tabs" ng-controller="tabsctrl">
  <div>
    <div class="top-tabs"> 
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="{{ tab.tabValue == activeModule? 'active':''}}" ng-repeat="tab in tabs">
          <a href="javascript:void(0)" ng-click="tabAction(tab.tabValue,tab.tabName)">{{tab.tabName}}</a>
        </li>
      </ul>

      <div class="tab-content">
        <div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1">
          <div class="row">
             Tab1 contnet
            </div>
          </div>
        </div>

        <div ng-if="tabName === 'Tab2'" role="tabpanel" class="tab-pane active" id="tab2">
          <div class="row">
            <div class="col-sm-12">
             Tab2 data
              </div>
            </div>
          </div>
        </div>

          <div ng-if="tabName === 'Tab3'" role="tabpanel" class="tab-pane active" id="tab2">
          <div class="row">
            <div class="col-sm-12">
             This tab should be shown based on the URL path
          </div>
        </div>

      </div>
    </div>
  </div>
</div> 

表1 contnet
表2数据
此选项卡应基于URL路径显示

您需要在JavaScript中使用

位置

提供程序 $location

consturl=location.url（）

并在HTML
ng if=“tabName=='Tab3'| | url==”中更新您的条件http://myURL.com/showAll“

您的HTML中还有两个
tab2
的ID，您应该修复它们，并且在tab1中缺少一个
col-sm-12
div
容器。为此，您需要ui路由器并设置路由，以便/showAll是不同的路由并解析不同的参数

这将是您的主要路线：

这需要一些参数：

然后在resolve of second中，您可以检查showParameter是否为showAll，并解析您想要的任何内容，即公开一些show/hide变量

您应该使用RouteProvider和routeParams

比如说

$routeProvider.when('/yourView/:param1/:param2', {
  templateUrl: 'yourViewHTMLFile.html',    
  controller: 'yourController'
  });

    <div id='tab1'>Tab1</div>
    <div id='tab2'>Tab2</div>
    <div id='tab3' ng-show='{{param1 =='testValue'}}'>Tab3</div>

现在，通过在控制器中注入n
$routeParams
以获取
URL
中给定的
params
值

.controller('yourController', ['$scope','$routeParams', function($scope, 
   $routeParams) {
        $scope.param1 = $routeParams.param1; // just as an example to model this in view
        var param2 = $routeParams.param2; //change here from param1 to 
        param2
        ...
    }]);

其次是简单。只需根据值显示/隐藏选项卡

比如说

$routeProvider.when('/yourView/:param1/:param2', {
  templateUrl: 'yourViewHTMLFile.html',    
  controller: 'yourController'
  });

    <div id='tab1'>Tab1</div>
    <div id='tab2'>Tab2</div>
    <div id='tab3' ng-show='{{param1 =='testValue'}}'>Tab3</div>

Tab1
表2
表3
我试图打印{location.url}，但它没有打印任何东西。@GumZyou必须首先定义位置，唯一的变量是url，这样你就可以打印{url}，然后它将获得位置。url（）我想当我选中ng show={param1='testValue}时'它会隐藏选项卡下显示的内容，而不是隐藏选项卡本身。我的要求是隐藏选项卡。您可以根据从
url
接收到的值，在
选项卡中添加值。正如@manoj patidar在他的回答中提到的那样