如何隐藏有角的div
如何隐藏有角的div
提问于 2015-06-12 11:54:25
我有一个带有div的页面，其中包含一个巨型加速器，这是在访问站点时显示的第一页。在这个页面上，我有一些链接，它们使用‘$routeProvide’/角链接到不同的页面。我想隐藏在其他链接/网页上，但我不知道如何做到这一点。
主页：
<body ng-app="single-page-app">
<div ng-controller="cfgController">
<div>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header col-md-12 col-sm-12 logo">
<a href="index.html"><img src="img/gilgal.png" class="img-responsive center-block" alt="Responsive image"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="container-fluid col-md-9 col-sm-12 hidden-xs col-md-offset-2">
<ul class="nav navbar-nav" id="navbar">
<li class="navlink"><a href="#/about">About Us</a></li>
<li class="navlink"><a href="#/advService">Advisory Service</a></li>
<li class="navlink"><a href="#/imService">Investment Service</a></li>
<li class="navlink"><a href="#/greService">Infrastructure Development</a></li>
<li class="navlink"><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="jumbotron" ng-hide="hideme">
<div class="container-fluid">
<div class="row jumb">
<div class="col-md-4 col-md-offset-1 head-card">
<h4 class="head-text">ADVISORY SERVICES</h4>
<p class="head-desc">We provide Corporate Finance Advisory Services for private and public institutions in Sub-Saharan Africa</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 head-card">
<h4 class="head-text">INVESTMENT MANAGEMENT SERVICES</h4>
<p class="head-desc">We focus on Real Estate and Infrastructural Projects in Sub-Saharan Africa</p>
</div>
</div>
</div>
</div>
<div ng-view>
</div>
<div class="container-fluid col-md-12 foot">
<p class="col-md-offset-1">All content copyright of Gilgal Capital Limited 2015 | Branding and Website by Ashebby</p>
</div>
<!-- Angular Route.js -->
<script src="js/angular-route.min.js"></script>
<!-- Angular.js -->
<script src="js/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</div>
</body>这是我的script.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/index',{
templateUrl: 'index.html'
})
.when('/about',{
templateUrl: 'about.html'
})
.when('/advService',{
templateUrl: 'advService.html'
})
.when('/imService',{
templateUrl: 'imService.html'
})
.when('/greService',{
templateUrl: 'greService.html'
})
.when('/contact',{
templateUrl: 'contact.html'
});
});
app.controller('cfgController'['$Scope', function($scope) {
$Scope.hideme = false;
$Scope.$on('$locationChangeStart', function(event) {
$scope.hideme = true;
});
}]);下面是一个指向不同页面about.html的典型链接：
<div class="container-fluid col-md-12 about-us">
<div class="about-us col-md-offset-1">
<h2 class="col-md-10">
<span class="title2">About Us</span>
<div class="line"></div>
</h2>
<p class="col-md-10 article">text</p>
</div>
</div>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-12 11:57:43
这真的很难..。因此，五皮很容易使用
要隐藏一个div，只需这样做：
<div ng-hide="hideme">your content </div>在控制器中定义hideme变量，如下所示：
$scope.hideme = true; // true to hide ,false to show编辑:在您的情况下，请执行以下操作：
<li class="navlink"><a ng-click="hideIt()" href="#/about">About Us</a></li>在您的控制器中，创建一个函数hideIt来隐藏巨型加速器div：
$scope.hideIt = function(){
$scope.hideme = true;
}Stack Overflow用户
发布于 2015-06-12 12:11:28
app.run(['$rootScope', function($rootScope) {
$rootScope.hideme = false;
$rootScope.$on('$routeChangeStart', function(){
$rootScope.hideme = true;
});与您的代码一起，只需添加这个运行块。应该管用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30802450
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号