我正在开发一个用户配置文件设计，你可以在这里看到：
// 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>
我现在面临的问题是当用户点击链接＆＃34;肖像（摄影下的链接）＆＃34;时，他/她看到页面上的所有内容而不是仅仅看到指定的div链接肖像。我已经研究了一段时间但无法继续。
感谢您提供帮助。对不起英语，我不是母语为英语的人。
答案 0 :(得分：0)
<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();
});
});
希望能帮到你......