タブ付きナビゲーション

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++) { 
 
\t var a = temp[i]; 
 

 
\t // Make sure the anchor isn't linking to another page. 
 
\t if ((a.pathname != location.pathname && 
 
\t \t '/' + a.pathname != location.pathname) || 
 
\t \t a.search != location.search) continue; 
 

 
\t // Make sure the anchor has a hash part. 
 
\t var match = regex.exec(a.href); 
 
\t if (!match) continue; 
 
\t var id = match[1]; 
 

 
\t // Add the anchor to a lookup table. 
 
\t if (id in anchors) 
 
\t \t anchors[id].push(a); 
 
\t else 
 
\t \t anchors[id] = [a]; 
 
} 
 

 
// Adds/removes the active/inactive CSS classes depending on whether the 
 
// element is active or not. 
 
function setClass(elem, active) { 
 
\t var classes = elem.className.split(/\s+/); 
 
\t var cls = active ? activeClass : inactiveClass, found = false; 
 
\t for (var i = 0; i < classes.length; i++) { 
 
\t \t if (classes[i] == activeClass || classes[i] == inactiveClass) { 
 
\t \t \t if (!found) { 
 
\t \t \t \t classes[i] = cls; 
 
\t \t \t \t found = true; 
 
\t \t \t } else { 
 
\t \t \t \t delete classes[i--]; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
\t if (!found) classes.push(cls); 
 
\t elem.className = classes.join(' '); 
 
} 
 

 
// Functions for managing the hash. 
 
function getParams() { 
 
\t var hash = location.hash || '#'; 
 
\t var parts = hash.substring(1).split('&'); 
 

 
\t var params = {}; 
 
\t for (var i = 0; i < parts.length; i++) { 
 
\t \t var nv = parts[i].split('='); 
 
\t \t if (!nv[0]) continue; 
 
\t \t params[nv[0]] = nv[1] || null; 
 
\t } 
 
\t 
 
\t return params; 
 
} 
 

 
function setParams(params) { 
 
\t var parts = []; 
 
\t for (var name in params) { 
 
\t \t // One of the following two lines of code must be commented out. Use the 
 
\t \t // first to keep empty values in the hash query string; use the second 
 
\t \t // to remove them. 
 
\t \t //parts.push(params[name] ? name + '=' + params[name] : name); 
 
\t \t if (params[name]) parts.push(name + '=' + params[name]); 
 
\t } 
 

 
\t location.hash = knownHash = '#' + parts.join('&'); 
 
} 
 

 
// Looks for changes to the hash. 
 
var knownHash = location.hash; 
 
function pollHash() { 
 
\t var hash = location.hash; 
 
\t if (hash != knownHash) { 
 
\t \t var params = getParams(); 
 
\t \t for (var name in params) { 
 
\t \t \t if (!(name in activates)) continue; 
 
\t \t \t activates[name](params[name]); 
 
\t \t } 
 
\t \t knownHash = hash; 
 
\t } 
 
} 
 
setInterval(pollHash, 250); 
 

 
function getParam(name) { 
 
\t var params = getParams(); 
 
\t return params[name]; 
 
} 
 

 
function setParam(name, value) { 
 
\t var params = getParams(); 
 
\t params[name] = value; 
 
\t 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) { 
 
\t 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) { 
 
\t var all = {}, first = initialId; 
 

 
\t // Activates all elements for a specific id (and inactivates the others.) 
 
\t function activate(id) { 
 
\t \t if (!(id in all)) return false; 
 

 
\t \t for (var cur in all) { 
 
\t \t \t if (cur == id) continue; 
 
\t \t \t for (var i = 0; i < all[cur].length; i++) { 
 
\t \t \t \t setClass(all[cur][i], false); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t for (var i = 0; i < all[id].length; i++) { 
 
\t \t \t setClass(all[id][i], true); 
 
\t \t } 
 

 
\t \t setParam(paramName, id); 
 

 
\t \t return true; 
 
\t } 
 

 
\t activates[paramName] = activate; 
 

 
\t function attach(item, basePath) { 
 
\t \t if (item instanceof Array) { 
 
\t \t \t for (var i = 0; i < item.length; i++) { 
 
\t \t \t \t attach(item[i], basePath); 
 
\t \t \t } 
 
\t \t } else if (typeof item == 'object') { 
 
\t \t \t for (var p in item) { 
 
\t \t \t \t var path = attach(p, basePath); 
 
\t \t \t \t attach(item[p], path); 
 
\t \t \t } 
 
\t \t } else if (typeof item == 'string') { 
 
\t \t \t var path = basePath ? basePath.slice(0) : []; 
 
\t \t \t var e = document.getElementById(item); 
 
\t \t \t if (!e) throw 'Could not find "' + item + '".' 
 
\t \t \t path.push(e); 
 

 
\t \t \t if (!first) first = item; 
 

 
\t \t \t // Store the elements in a lookup table. 
 
\t \t \t all[item] = path; 
 

 
\t \t \t // Attach a function that will activate the appropriate element 
 
\t \t \t // to all anchors. 
 
\t \t \t if (item in anchors) { 
 
\t \t \t \t // Create a function that will call the 'activate' function with 
 
\t \t \t \t // the proper parameters. It will be used as the event callback. 
 
\t \t \t \t var func = (function (id) { 
 
\t \t \t \t \t return function (e) { 
 
\t \t \t \t \t \t activate(id); 
 

 
\t \t \t \t \t \t if (!e) e = window.event; 
 
\t \t \t \t \t \t if (e.preventDefault) e.preventDefault(); 
 
\t \t \t \t \t \t e.returnValue = false; 
 
\t \t \t \t \t \t return false; 
 
\t \t \t \t \t }; 
 
\t \t \t \t })(item); 
 

 
\t \t \t \t for (var i = 0; i < anchors[item].length; i++) { 
 
\t \t \t \t \t var a = anchors[item][i]; 
 

 
\t \t \t \t \t if (a.addEventListener) { 
 
\t \t \t \t \t \t a.addEventListener('click', func, false); 
 
\t \t \t \t \t } else if (a.attachEvent) { 
 
\t \t \t \t \t \t a.attachEvent('onclick', func); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t throw 'Unsupported event model.'; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t all[item].push(a); 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t return path; 
 
\t \t } else { 
 
\t \t \t throw 'Unexpected type.'; 
 
\t \t } 
 

 
\t \t return basePath; 
 
\t } 
 

 
\t attach(activatables); 
 

 
\t // Activate an element. 
 
\t if (first) activate(getParam(paramName)) || activate(first); 
 
} 
 

 
return makeActivatable; 
 
})();

/* The main content */ 
 

 
.main-content { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t max-width: 600px; 
 
\t padding-top: 40px; 
 
\t margin: 0 0 40px 260px; 
 
} 
 

 

 
/* The left-collapsing sidebar */ 
 

 
.sidebar-left-collapse { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t background-color: #292c2f; 
 
\t width: 180px; 
 
\t height: 100%; 
 
\t padding: 20px 0; 
 
} 
 

 
.sidebar-left-collapse > a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t font-family: Cookie, cursive; 
 
\t width: 122px; 
 
\t height: 122px; 
 
\t margin: 0 auto; 
 
\t text-align: center; 
 
\t color: #ffffff; 
 
\t font-size: 44px; 
 
\t font-weight: normal; 
 
\t line-height: 2.6; 
 
\t border-radius: 50%; 
 
\t background-color: #181a1b; 
 
} 
 

 
.sidebar-left-collapse .sidebar-links { 
 
\t margin: 30px auto; 
 
} 
 

 
.sidebar-links div > a { 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t margin: 0 auto 5px auto; 
 
\t padding: 10px 0 10px 5px; 
 
\t background-color: #35393e; 
 
\t text-align: left; 
 
\t color: #b3bcc5; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t line-height: 2; 
 
\t border-left-width: 2px; 
 
\t border-left-style: solid; 
 
} 
 

 
.sidebar-links div.selected > a{ 
 
\t background-color: #ffffff; 
 
\t color: #565d63; 
 
\t line-height: 2.3; 
 
\t margin: 0; 
 
} 
 

 
.sidebar-links div > a i.fa { 
 
\t position: relative; 
 
\t font-size: 20px; 
 
\t top: 3px; 
 
\t width: 40px; 
 
\t text-align: center; 
 
} 
 

 
.sidebar-links div ul.sub-links { 
 
\t max-height: 0; 
 
\t overflow: hidden; 
 
\t list-style: none; 
 
\t padding: 0 0 0 30px; 
 
\t color: #b3bcc5; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t line-height: 24px; 
 
\t margin: 0; 
 
\t transition: 0.4s; 
 
} 
 

 
.sidebar-links div.selected ul.sub-links { 
 
\t max-height: 150px; 
 
\t padding: 12px 0 12px 30px; 
 
} 
 

 
.sidebar-links div .sub-links a { 
 
\t text-decoration: none; 
 
\t color: #b3bcc5; 
 
\t display: block; 
 
\t text-align: left; 
 
} 
 

 
/* Link Colors */ 
 

 
.sidebar-links div.link-blue > a { 
 
\t border-color: #487db2; 
 
} 
 

 
.sidebar-links div.link-blue > a i.fa { 
 
\t color: #487db2; 
 
} 
 

 
.sidebar-links div.link-red > a { 
 
\t border-color: #da4545; 
 
} 
 

 
.sidebar-links div.link-red > a i.fa { 
 
\t color: #da4545; 
 
} 
 

 
.sidebar-links div.link-yellow > a { 
 
\t border-color: #d0d237; 
 
} 
 

 
.sidebar-links div.link-yellow > a i.fa { 
 
\t color: #d0d237; 
 
} 
 

 
.sidebar-links div.link-green > a { 
 
\t border-color: #86be2e; 
 
} 
 

 
.sidebar-links div.link-green > a i.fa { 
 
\t color: #86be2e; 
 
} 
 

 
/* Making the sidebar responsive */ 
 

 
@media (max-width: 900px) { 
 

 
\t .main-content{ 
 
\t \t max-width: none; 
 
\t \t padding: 70px 20px; 
 
\t \t margin: 0 0 40px; 
 
\t } 
 

 
\t .sidebar-left-collapse { 
 
\t \t width: auto; 
 
\t \t height: auto; 
 
\t \t position: static; 
 
\t \t padding: 20px 0 0; 
 
\t } 
 

 
\t .sidebar-left-collapse .sidebar-links { 
 
\t \t text-align: center; 
 
\t \t margin: 20px auto 0; 
 
\t } 
 

 
\t .sidebar-links div { 
 
\t \t display: inline-block; 
 
\t \t width: 100px; 
 
\t } 
 

 
\t .sidebar-links div > a { 
 
\t \t text-align: center; 
 
\t \t margin: 0; 
 
\t \t padding: 10px 0; 
 
\t \t border-left: none; 
 
\t \t border-top-width: 2px; 
 
\t \t border-top-style: solid; 
 
\t } 
 

 
\t .sidebar-links div > a i.fa { 
 
\t \t display: block; 
 
\t \t margin: 0 auto 5px; 
 
\t } 
 

 
\t .sidebar-links div ul.sub-links { 
 
\t \t display: none; 
 
\t } 
 

 
\t .sidebar-links div.selected .sub-links { 
 
\t \t display: block; 
 
\t \t position: absolute; 
 
\t \t text-align: center; 
 
\t \t width: auto; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t } 
 

 
\t .sidebar-links div.selected .sub-links li { 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .sidebar-links div.selected .sub-links a { 
 
\t \t display: inline-block; 
 
\t \t margin-right: 20px; 
 
\t \t font-size: 13px; 
 
\t \t color: #748290; 
 
\t } 
 

 
} 
 

 
/* Smartphone version */ 
 

 
@media (max-width: 450px) { 
 

 
\t .main-content{ 
 
\t \t padding: 90px 20px; 
 
\t } 
 

 
\t .sidebar-left-collapse { 
 
\t \t padding: 20px 0; 
 
\t } 
 

 
\t .sidebar-left-collapse .sidebar-links { 
 
\t \t text-align: center; 
 
\t \t margin: 20px auto 0; 
 
\t \t position: relative; 
 
\t } 
 

 
\t .sidebar-links div { 
 
\t \t display: block; 
 
\t \t width: 240px; 
 
\t \t margin: 0 auto 5px; 
 
\t } 
 

 
\t .sidebar-links div > a { 
 
\t \t text-align: left; 
 
\t \t padding: 10px 25px; 
 
\t \t vertical-align: middle; 
 
\t \t border-top: none; 
 
\t \t border-left-width: 2px; 
 
\t \t border-left-style: solid; 
 
\t } 
 

 
\t .sidebar-links div > a i.fa { 
 
\t \t display: inline-block; 
 
\t \t font-size: 20px; 
 
\t \t width: 20px; 
 
\t \t margin: 0 20px 0 0; 
 
\t } 
 

 
\t .sidebar-links div.selected .sub-links { 
 
\t \t bottom: -90px; 
 
\t } 
 

 
} 
 

 
/* \t Removing margins and paddings from the body, so that 
 
    the sidebar takes the full height of the page */ 
 

 
body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
\t <title>Left Sidebar With Collapsible Links</title> 
 

 
\t <link rel="stylesheet" href="assets/demo.css"> 
 
\t <link rel="stylesheet" href="assets/sidebar-collapse.css"> 
 

 
\t <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> 
 
\t <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'> 
 

 

 
</head> 
 

 
<body> 
 

 
\t <aside class="sidebar-left-collapse"> 
 

 
\t \t <a href="#" class="company-logo">Logo</a> 
 

 
\t \t <div class="sidebar-links"> 
 

 
\t \t \t <div class="link-blue selected"> 
 

 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <i class="fa fa-picture-o"></i>Photography 
 
\t \t \t \t </a> 
 

 
\t \t \t \t <ul class="sub-links"> 
 
\t \t \t \t \t <li><a href="#">Portraits</a></li> 
 
\t \t \t \t \t <li><a href="#">Landscape</a></li> 
 
\t \t \t \t \t <li><a href="#">Studio shots</a></li> 
 
\t \t \t \t \t <li><a href="#">Macros</a></li> 
 
\t \t \t \t </ul> 
 

 
\t \t \t </div> 
 

 
\t \t \t <div class="link-red"> 
 

 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <i class="fa fa-heart-o"></i>Favorites 
 
\t \t \t \t </a> 
 

 
\t \t \t \t <ul class="sub-links"> 
 
\t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 4</a></li> 
 
\t \t \t \t </ul> 
 

 
\t \t \t </div> 
 

 
\t \t \t <div class="link-yellow"> 
 

 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <i class="fa fa-keyboard-o"></i>Projects 
 
\t \t \t \t </a> 
 

 
\t \t \t \t <ul class="sub-links"> 
 
\t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 4</a></li> 
 
\t \t \t \t </ul> 
 

 
\t \t \t </div> 
 

 
\t \t \t <div class="link-green"> 
 

 
\t \t \t \t <a href="#"> 
 
\t \t \t \t \t <i class="fa fa-map-marker"></i>Places 
 
\t \t \t \t </a> 
 

 
\t \t \t \t <ul class="sub-links"> 
 
\t \t \t \t \t <li><a href="#">Link 1</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 2</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t \t \t <li><a href="#">Link 4</a></li> 
 
\t \t \t \t </ul> 
 

 
\t \t \t </div> 
 

 
\t \t </div> 
 

 
\t </aside> 
 

 
\t <div class="main-content"> 
 

 
\t \t <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> 
 

 

 
\t </div> 
 

 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script> 
 

 
\t \t $(function() { 
 

 
\t \t \t var links = $('.sidebar-links > div'); 
 

 
\t \t \t links.on('click', function() { 
 

 
\t \t \t \t links.removeClass('selected'); 
 
\t \t \t \t $(this).addClass('selected'); 
 

 
\t \t \t }); 
 
\t \t }); 
 

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

希望...