Skip to content

Instantly share code, notes, and snippets.

@macu

macu/activate.js

Last active December 28, 2015 15:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save macu/7522140 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save macu/7522140 to your computer and use it in GitHub Desktop.
Download ZIP
Add "active" to elements defining ownp attribute specifying a selector matching a parent element. This was written specifically to add "active" to nav elements for the current page in Bootstrap-based templates.
Raw
activate.js
$(function(){
// loop all elements that specify an ownp attribute,
// and activate those in a parent matching the specified selector.
$("[ownp]").each(function(){
if ($(this).closest($(this).attr("ownp")).length) {
$(this).addClass("active");
}
});
});
Raw
example.html
<body id="homePage">
<ul class="nav navbar-nav">
<li ownp="#homePage"><a href="{{ site.baseurl }}/">Home</a></li>
<li ownp="#aboutPage"><a href="{{ site.baseurl }}/about/">About</a></li>
<li ownp="#resourcePage"><a href="{{ site.baseurl }}/resources/">Resources</a></li>
<li ownp="#eventsPage"><a href="{{ site.baseurl }}/events/">Events &amp; Workshops</a></li>
<li ownp="#contactPage"><a href="{{ site.baseurl }}/contact/">Contact</a></li>
<li ownp="#faqPage"><a href="{{ site.baseurl }}/faq/">FAQ</a></li>
</ul>
</body>
@macu

macu commented Dec 12, 2013

Copy link
Copy Markdown
Author

better to be more general -- why require the selector match a parent rather than any other single element in the page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment