用户配置文件的选项卡导航
Tabbed navigation for user profile
我现在正在进行用户配置文件设计,您可以在这里看到:
// Wrapped in a function so as to not pollute the global scope.
var activatables = (function () {
// The CSS classes to use for active/inactive elements.
var activeClass = 'active';
var inactiveClass = 'inactive';
var anchors = {}, activates = {};
var regex = /#([A-Za-z][A-Za-z0-9:._-]*)$/;
// Find all anchors (<a href="#something">.)
var temp = document.getElementsByTagName('a');
for (var i = 0; i < temp.length; i++) {
var a = temp[i];
// Make sure the anchor isn't linking to another page.
if ((a.pathname != location.pathname &&
'/' + a.pathname != location.pathname) ||
a.search != location.search) continue;
// Make sure the anchor has a hash part.
var match = regex.exec(a.href);
if (!match) continue;
var id = match[1];
// Add the anchor to a lookup table.
if (id in anchors)
anchors[id].push(a);
else
anchors[id] = [a];
}
// Adds/removes the active/inactive CSS classes depending on whether the
// element is active or not.
function setClass(elem, active) {
var classes = elem.className.split(/'s+/);
var cls = active ? activeClass : inactiveClass, found = false;
for (var i = 0; i < classes.length; i++) {
if (classes[i] == activeClass || classes[i] == inactiveClass) {
if (!found) {
classes[i] = cls;
found = true;
} else {
delete classes[i--];
}
}
}
if (!found) classes.push(cls);
elem.className = classes.join(' ');
}
// Functions for managing the hash.
function getParams() {
var hash = location.hash || '#';
var parts = hash.substring(1).split('&');
var params = {};
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || null;
}
return params;
}
function setParams(params) {
var parts = [];
for (var name in params) {
// One of the following two lines of code must be commented out. Use the
// first to keep empty values in the hash query string; use the second
// to remove them.
//parts.push(params[name] ? name + '=' + params[name] : name);
if (params[name]) parts.push(name + '=' + params[name]);
}
location.hash = knownHash = '#' + parts.join('&');
}
// Looks for changes to the hash.
var knownHash = location.hash;
function pollHash() {
var hash = location.hash;
if (hash != knownHash) {
var params = getParams();
for (var name in params) {
if (!(name in activates)) continue;
activates[name](params[name]);
}
knownHash = hash;
}
}
setInterval(pollHash, 250);
function getParam(name) {
var params = getParams();
return params[name];
}
function setParam(name, value) {
var params = getParams();
params[name] = value;
setParams(params);
}
// If the hash is currently set to something that looks like a single id,
// automatically activate any elements with that id.
var initialId = null;
var match = regex.exec(knownHash);
if (match) {
initialId = match[1];
}
// Takes an array of either element IDs or a hash with the element ID as the key
// and an array of sub-element IDs as the value.
// When activating these sub-elements, all parent elements will also be
// activated in the process.
function makeActivatable(paramName, activatables) {
var all = {}, first = initialId;
// Activates all elements for a specific id (and inactivates the others.)
function activate(id) {
if (!(id in all)) return false;
for (var cur in all) {
if (cur == id) continue;
for (var i = 0; i < all[cur].length; i++) {
setClass(all[cur][i], false);
}
}
for (var i = 0; i < all[id].length; i++) {
setClass(all[id][i], true);
}
setParam(paramName, id);
return true;
}
activates[paramName] = activate;
function attach(item, basePath) {
if (item instanceof Array) {
for (var i = 0; i < item.length; i++) {
attach(item[i], basePath);
}
} else if (typeof item == 'object') {
for (var p in item) {
var path = attach(p, basePath);
attach(item[p], path);
}
} else if (typeof item == 'string') {
var path = basePath ? basePath.slice(0) : [];
var e = document.getElementById(item);
if (!e) throw 'Could not find "' + item + '".'
path.push(e);
if (!first) first = item;
// Store the elements in a lookup table.
all[item] = path;
// Attach a function that will activate the appropriate element
// to all anchors.
if (item in anchors) {
// Create a function that will call the 'activate' function with
// the proper parameters. It will be used as the event callback.
var func = (function (id) {
return function (e) {
activate(id);
if (!e) e = window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
return false;
};
})(item);
for (var i = 0; i < anchors[item].length; i++) {
var a = anchors[item][i];
if (a.addEventListener) {
a.addEventListener('click', func, false);
} else if (a.attachEvent) {
a.attachEvent('onclick', func);
} else {
throw 'Unsupported event model.';
}
all[item].push(a);
}
}
return path;
} else {
throw 'Unexpected type.';
}
return basePath;
}
attach(activatables);
// Activate an element.
if (first) activate(getParam(paramName)) || activate(first);
}
return makeActivatable;
})();
/* The main content */
.main-content {
font-family: Arial, Helvetica, sans-serif;
max-width: 600px;
padding-top: 40px;
margin: 0 0 40px 260px;
}
/* The left-collapsing sidebar */
.sidebar-left-collapse {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
left: 0;
background-color: #292c2f;
width: 180px;
height: 100%;
padding: 20px 0;
}
.sidebar-left-collapse > a {
display: block;
text-decoration: none;
font-family: Cookie, cursive;
width: 122px;
height: 122px;
margin: 0 auto;
text-align: center;
color: #ffffff;
font-size: 44px;
font-weight: normal;
line-height: 2.6;
border-radius: 50%;
background-color: #181a1b;
}
.sidebar-left-collapse .sidebar-links {
margin: 30px auto;
}
.sidebar-links div > a {
display: block;
text-decoration: none;
margin: 0 auto 5px auto;
padding: 10px 0 10px 5px;
background-color: #35393e;
text-align: left;
color: #b3bcc5;
font-size: 12px;
font-weight: bold;
line-height: 2;
border-left-width: 2px;
border-left-style: solid;
}
.sidebar-links div.selected > a{
background-color: #ffffff;
color: #565d63;
line-height: 2.3;
margin: 0;
}
.sidebar-links div > a i.fa {
position: relative;
font-size: 20px;
top: 3px;
width: 40px;
text-align: center;
}
.sidebar-links div ul.sub-links {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0 0 0 30px;
color: #b3bcc5;
font-size: 12px;
font-weight: bold;
line-height: 24px;
margin: 0;
transition: 0.4s;
}
.sidebar-links div.selected ul.sub-links {
max-height: 150px;
padding: 12px 0 12px 30px;
}
.sidebar-links div .sub-links a {
text-decoration: none;
color: #b3bcc5;
display: block;
text-align: left;
}
/* Link Colors */
.sidebar-links div.link-blue > a {
border-color: #487db2;
}
.sidebar-links div.link-blue > a i.fa {
color: #487db2;
}
.sidebar-links div.link-red > a {
border-color: #da4545;
}
.sidebar-links div.link-red > a i.fa {
color: #da4545;
}
.sidebar-links div.link-yellow > a {
border-color: #d0d237;
}
.sidebar-links div.link-yellow > a i.fa {
color: #d0d237;
}
.sidebar-links div.link-green > a {
border-color: #86be2e;
}
.sidebar-links div.link-green > a i.fa {
color: #86be2e;
}
/* Making the sidebar responsive */
@media (max-width: 900px) {
.main-content{
max-width: none;
padding: 70px 20px;
margin: 0 0 40px;
}
.sidebar-left-collapse {
width: auto;
height: auto;
position: static;
padding: 20px 0 0;
}
.sidebar-left-collapse .sidebar-links {
text-align: center;
margin: 20px auto 0;
}
.sidebar-links div {
display: inline-block;
width: 100px;
}
.sidebar-links div > a {
text-align: center;
margin: 0;
padding: 10px 0;
border-left: none;
border-top-width: 2px;
border-top-style: solid;
}
.sidebar-links div > a i.fa {
display: block;
margin: 0 auto 5px;
}
.sidebar-links div ul.sub-links {
display: none;
}
.sidebar-links div.selected .sub-links {
display: block;
position: absolute;
text-align: center;
width: auto;
left: 0;
right: 0;
}
.sidebar-links div.selected .sub-links li {
display: inline-block;
}
.sidebar-links div.selected .sub-links a {
display: inline-block;
margin-right: 20px;
font-size: 13px;
color: #748290;
}
}
/* Smartphone version */
@media (max-width: 450px) {
.main-content{
padding: 90px 20px;
}
.sidebar-left-collapse {
padding: 20px 0;
}
.sidebar-left-collapse .sidebar-links {
text-align: center;
margin: 20px auto 0;
position: relative;
}
.sidebar-links div {
display: block;
width: 240px;
margin: 0 auto 5px;
}
.sidebar-links div > a {
text-align: left;
padding: 10px 25px;
vertical-align: middle;
border-top: none;
border-left-width: 2px;
border-left-style: solid;
}
.sidebar-links div > a i.fa {
display: inline-block;
font-size: 20px;
width: 20px;
margin: 0 20px 0 0;
}
.sidebar-links div.selected .sub-links {
bottom: -90px;
}
}
/* Removing margins and paddings from the body, so that
the sidebar takes the full height of the page */
body {
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Sidebar With Collapsible Links</title>
<link rel="stylesheet" href="assets/demo.css">
<link rel="stylesheet" href="assets/sidebar-collapse.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<aside class="sidebar-left-collapse">
<a href="#" class="company-logo">Logo</a>
<div class="sidebar-links">
<div class="link-blue selected">
<a href="#">
<i class="fa fa-picture-o"></i>Photography
</a>
<ul class="sub-links">
<li><a href="#">Portraits</a></li>
<li><a href="#">Landscape</a></li>
<li><a href="#">Studio shots</a></li>
<li><a href="#">Macros</a></li>
</ul>
</div>
<div class="link-red">
<a href="#">
<i class="fa fa-heart-o"></i>Favorites
</a>
<ul class="sub-links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="link-yellow">
<a href="#">
<i class="fa fa-keyboard-o"></i>Projects
</a>
<ul class="sub-links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div class="link-green">
<a href="#">
<i class="fa fa-map-marker"></i>Places
</a>
<ul class="sub-links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
</div>
</aside>
<div class="main-content">
<div> Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography</div>
<div> Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits</div>
<div>
Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites Favorites
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
var links = $('.sidebar-links > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
});
</script>
</body>
</html>
我现在面临的问题是,当用户点击链接"肖像(摄影下的链接)"时,他/她会看到页面上的一切,而不仅仅是看到为链接肖像指定的div。我已经做了一段时间了,但无法继续。
谢谢你的帮助。对不起,我不是以英语为母语的人。
你能做这样的事情吗?
<ul class="sub-links">
<li><a href="#" id="portraits">Portraits</a></li>
<li><a href="#" id="landscape">Landscape</a></li>
<li><a href="#" id="studioshots">Studio shots</a></li>
<li><a href="#" id="macros">Macros</a></li>
</ul>
-
<div class="main-content">
<div class="portraits"> Porttaits ... Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography Photography</div>
<div class="macros"> Macros ... Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits Portraits</div>
</div>
-
$(function () {
var links = $('.sidebar-links > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
var sublinks = $('.sub-links a');
sublinks.on('click', function () {
$('.main-content > div').hide();
$('.main-content').find($(this).attr('id')).show();
});
});
希望这能帮助你。。。
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- 如何在angular bootstrap ui中聚焦活动导航选项卡中的拳头输入字段
- 引导导航选项卡未突出显示活动选项卡
- 如何在不包含导航选项卡内容、页脚和头部的情况下打印 HTML/PHP 页面
- 引导导航选项卡在小提琴中工作,但在使用 Chrome 打开时则不工作
- 我的导航选项卡正在删除元素
- 如何保持导航选项卡保持不变
- 如何在特定情况下突出显示活动导航选项卡
- 如果导航选项卡内容为空,则无法隐藏导航选项卡
- 引导导航选项卡同时显示两个选项卡
- 将导航选项卡样式类设置为活动,如果当前在该路由中 反应反应路由器.
- 如何使用jQuery在单击特定链接时打开引导导航选项卡的特定选项卡
- 导航选项卡保持一定的颜色
- 通过 GET URL 加载引导导航导航选项卡
- 如何使用按钮从外部激活导航选项卡
- 维护引导's在页面之间激活了导航选项卡
- 重写一个Javascript函数,该函数可以选择在IE8中工作的活动导航选项卡
- href指向未在同一页面上激活的引导程序导航选项卡的链接
- 更改窗口大小和在导航选项卡之间切换时,dataTables的大小调整不正确
- 谷歌地图没有't在导航选项卡中显示右侧