javascript - 用户个人资料的选项卡式导航

Question

我现在正在研究用户个人资料设计，您可以在此处看到:

// 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。我已经为此工作了一段时间，但无法继续。

感谢您提供帮助。抱歉，我的英语不是很好，我的母语不是英语。

Answer 1

你能做这样的事情吗？

<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();
        });
    });

希望对你有帮助...