public
Created

navigation-tab-thing

  • Download Gist
nav_tab_thing.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
<!DOCTYPE html>
 
<html>
<head>
<script src="../../build/aui/aui.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
 
<style type="text/css" media="screen">
body {
font-size: 12px;
}
 
#wrapper {
padding: 10px;
}
 
.aui-custom {
background: #eee;
border: 3px solid #999;
}
 
.aui-custom-rendered {
background: #ffc;
border: 3px solid #fc0;
}
 
.content-area {
display: none;
}
 
.content-area.selected {
display: block;
}
</style>
</head>
 
<body>
 
<ul id="test">
<li><a href="#div1">Div1</a></li>
<li><a href="#div2">Div2</a></li>
<li><a href="#div3">Div3</a></li>
<li><a href="#div4">Div4</a></li>
</ul>
 
<div class="content-area selected" data-bannerImage="path/to/doclib/image" id="div1">Div 1</div>
<div class="content-area" id="div2">Div 2</div>
<div class="content-area" id="div3">Div 3</div>
<div class="content-area" id="div4">Div 4</div>
<script type="text/javascript" charset="utf-8">
 
AUI().ready(
'aui-base',
function(A) {
 
if (location.hash) {
var div = A.one(location.hash);
 
if (div) {
div.radioClass('selected');
 
div.setStyle('backgroundImage', div.attr('data-bannerImage'));
}
}
 
A.one('#test').delegate(
'click',
function(event) {
var a = event.currentTarget;
 
event.preventDefault();
 
var href = a.get('hash');
var div = A.one(href);
 
if (div) {
div.radioClass('selected');
 
div.setStyle('backgroundImage', div.attr('data-bannerImage'));
}
},
'a'
);
}
);
 
</script>
 
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.