This time I will share jQuery Plugin and tutorial about Load AJAX Content Using URL Hash – hashy-content, hope it will help you in programming stack.
hashy-content is a small jQuery plugin for the dynamic webpage that makes it possible to loads external web content into the current webpage via AJAX and URL hash (fragment identifier).
How to use it:
1. Load the latest version of jQuery and the hashy-content plugin in the html document.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<script src="js/hashy-content.js"></script> |
2. Create an empty container in which the AJAX content will insert.
1 |
<section id="example"></section> |
3. Add hashes with their corresponding AJAX content:
1 |
$("#example").addHash("index", "content/index_content.html"); |
2 |
$("#example").addHash("apple", "content/apple.html"); |
3 |
$("#example").addHash("orange", "content/orange.html"); |
4 |
$("#example").addHash("banana", "content/banana.html"); |
4. Watch the hash changes:
5. Create anchor links to load the AJAX content:
1 |
<a href="#apple">Apple</a> |
2 |
<a href="#orange">Orange</a> |
3 |
<a href="#banana">Banana</a> |
Changelog:
2018-10-04
- Now it’s possible to pass a function to be called when the content is loaded for a specific hash.
This awesome jQuery plugin is developed by EricsonWillians. For more Advanced Usages, please check the demo page or visit the official website.
