1
當我點擊側邊欄上的一個按鈕，如果當前選項卡的第二個選項卡的導航選項卡將顯示首選項卡，第二個選項卡失去焦點。我如何才能讓第二個選項卡中顯示，同時點擊側邊欄上的按鈕？如何保持導航標籤保持不變
的代碼是的jsfiddle
https://jsfiddle.net/98okrj0f/9/
的AngularJs腳本作品在我的地方。任何人都可以告訴我如何使它在jsfiddle中工作？
HTML代碼在這裏
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
<a href="#">Version</a>
<ul>
<li class="sub">
<a href="#">V2</a>
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
<a href="#">V3</a>
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2><a href="#erd">ERD</a></h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2><a href="#col">Columns</a></h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2><a href="#home">Home</a></h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS代碼這裏。
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
更新jsfiddle。
https://jsfiddle.net/98okrj0f/13/
在的jsfiddle的左側，您可以添加外部資源。這樣你可以添加js文件或jQuery。 – user3398922
我試圖添加網址爲http參考，然後它要求HTTPS所以我打取消。不知何故angular-min.js被添加。然後我點擊更新然後運行。它仍然無法工作。進一步想法？ – Shawn
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js – user3398922