1、引导做的导航栏HTML页必须加载bootstrap.min.css,bootstrap.min。js代码才能实现导航的效果。下图是完整的代码及效果图。
2、改变导航背景颜色,设置为黑色。给导航标签设置背景颜色为黑色,代码为背景:#000>。
3、改变导航选中栏目颜色,如“首页“设置为背景为红色。改变类名积极为newactive,并设置其背景颜色为红色。
4、改变“菜单”下的二级栏目,鼠标放上去的颜色。设置类名为下拉菜单>。
5、改变点击“菜单”,弹出二级栏目时的颜色。css代码是。navbar-default.navbar-nav>.open>:焦点{颜色:黑色,背景颜色:红色。}>。
6、改变导航栏默认文字的颜色。设置类名navbar-default下面一个标签的文字颜色为白色,代码是。navbar-default.navbar-nav>li>{颜色:#fff。}。
经我修正现在可以运行了
<html><head>
<style>
*{margin:0padding:0}
#area li{text-align:centerwidth:50pxheight:20pxlist-style-type:nonedisplay:blockfloat:leftbackground:green}
/* 修正1*/
#area>li>ul{display:none}
</style>
<script>
window.onload=function(){
var oArea=document.getElementById("area")
// 修正2
var len = oArea.children && oArea.children.length || 0
// 修正3
for(i=0i<leni++)
{
oArea.children[i].onmouseover=function(){
this.children[0] && (this.children[0].style.display="block")
}
oArea.children[i].onmouseout=function(){
this.children[0] && (this.children[0].style.display="none")
}
}
}
</script>
<title></title>
</head>
<body>
<div id="nav">
<ul id="area">
<li id="bj">北京
<ul>
<li>宣武</li>
<li>西城</li>
</ul></li>
<li>河北</li>
</ul>
</div>
</body>
</html>
首先我们使用工具建立一个文件夹名称为ng-repeat。然后在文件夹内建立两个文件分别为index.html,index.js。index.html根据截图编写界面模板。具体如图所示。然后再index.html引入angularjs文件以及index.js文件。加入两行。分别为:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="index.js"></script>
然后编写index.js。文件。文件内容为:
var app = angular.module("myApp",[])
app.controller('simpleController',function($scope)
{
$scope.sites = [
{name:'百度',path:'www.baidu.com'},
{name:'新浪',path:'www.sina.com.cn'},
{name:'腾讯',path:'www.qq.com'}
]
})
然后再index.html文件内,定义angularjs的管理域,本篇为从html开始即为angularjs的管理域。然后编写核心处代码,代码为:
<div ng-controller="simpleController">
<ul>
<li ng-repeat="site in sites">
编号:{{$index+1}} ----网站名称:{{site.name}}----网站地址:{{site.path}}
</li>
</ul>
</div>
最后点击运行index.html,本篇以google chrome浏览器打开。即可看到效果。是不是很神奇啊!!!
另外在此处还支持输入
{{$first}}意思为判断是否为第一个 返回结果为true/false。
{{$middle}} 判断是否为中间部分,返回结果为true/false。
{{$last}} 判断是否为最好一个,返回结果为true/false。
{{$even}} 判断是否为偶数,返回结果为true/false。
{{$odd}} 判断是否为单数,返回结果为true/false。