It work but when i refresh page, it show my link content and homepage content (class active is visible). You can try it here (and see full code) . Probably i must use cache but i do not have idea how to realize it.
I’ve not fully understood what you are trying to do, but if you want to preserve state between page refreshes, you’ll need to use some kind of client-side storage. Local storage, for example.
Check this page : http://skusobnastranka1.php5.sk/ . Click on some link (link1-link5) and refresh your browser. It show homepage content and content of current link. But i need show only content of current link. After refresh it miss my jquery function
As you are hiding and showing your content using JavaScript depending on what your user clicks on, you will need to store a reference to the most recently clicked tab (defaulting to home) and then fetch that reference on page load and display the correct content accordingly.
I would use local storage to do that. This is the basic syntax:
Thanks so much for your help. I have last question .Can i use it for save background image? In my real site ( no this example) i change background with jquery script. When i click on some link (link1 … link5) it change body background. Jquery:
Pullo thanks a lot. Your method work great. Only one thing is negative that now it doesnt show link category in browser www.webpage.com#home || www.webpage.com#link1 … But i am trying resolve it.
To do that, just remove this: e.preventDefault();
This prevents the browser from executing the element’s default action (in this case, following the link).
This might not be a good idea, however, as this will cause the page to jump to that location.
Why do you need urls in this form?
I need urls in this form because its better for orientation on a webpage. I am working on a sport stream webpage. It is needed to use urls form #specific-location because i want to use more channels . Example: Main category: football subcategories: Channel1Channel2 … . If i click on link Channel1 it change only main div content . Somethink like this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266743-Switch-Div-Content-Using-Javascript&p=1229155#post1229155
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container'+idInfo).style.display = 'block';
}
</script>
<style type="text/css">
#container1, #container2, #container3, #container4 {
display:none;
border:3px solid blue;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="linkDiv">
<a href="#as" onclick="showDiv('');return false">Home</a>
<a href="#sasa" onclick="showDiv('1');return false">link 1</a>
<a href="#" onclick="showDiv('2');return false">link 2</a>
<a href="#" onclick="showDiv('3');return false">link 3</a>
<a href="#" onclick="showDiv('4');return false">link 4</a>
</div>
<p>
<div id="container">
The container I want all content divs to load into... and by default, to show the first container content
</div>
<!-- The 4 container content divs. -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
<div id="container4">Container #4<p>Whole bunch of text 4</div>
</div>
</body>
</html>
It might also help users send links to an exact part of the page to a friend… the friend can
see the name of the part (channel)
jump right to it on page load
I was making one of those stupid one-big-page-as-website things and using a Javascript scrollTo thing which, with preventDefault() removed the destination… and during this I realised I did want the hashes in the URLs. Just didn’t want the history (back button should take the user off the page and to wherever they were before they landed here), historyAPI can fix that.
Loved the localstorage example, I’ve actually never used it and was thinking of it recently, and now just happen to run across your post!
I did not realize this. Back button doesn’t work so i try historiAPI. And other think. If web browser is re-open it start on lastSelectedTab. So i tried fix it with
If you only want the tab stored during the time the browser is open, then instead of localstorage (which acts like a cookie, and browsers don’t forget cookies when you close them either, unless you set your browser up to do that), you can use
sessionStorage.
It’s otherwise very similar, but a “session” is from the time the user opens the browser and the page, until they close the browser. The session ends, the values are dumped.
You also don’t want to return: false in your HTML-- if javascript doesn’t load, or if the user’s browser is old enough to not have local/session storage, then you at least still want the links to do something, right? Just won’t be pretty, (all options would show and user would jump down to an id on the page matching the hash in the link’s URL), but will work.
It work thanks man. So i go on History API. Here is WebStorage support : http://caniuse.com/namevalue-storage I like that mobile browsers have good support. Disabled Javascript you can fix with <noscript>Your browser does not support JavaScript!</noscript> .
I don’t think that fixes anything, and speaking personally, that particular wording annoys lumps out of me. My browser supports JavaScript perfectly well; I choose to browse with it disabled.[/ot]
Stomme poes was pointing out that you need to ensure the links will work without JavaScript. Simply adding a statement saying “Your browser does not support JavaScript!” doesn’t make that happen. Not everyone affected will be able or know how to enable JS, or to upgrade their browser.
My point is that the wording of that message annoys me. I have chosen to disable JavaScript, so to tell my my browser doesn’t support it is just wrong. I also object to messages which say “you must enable JavaScript to use this site” or something similar. I prefer something along the lines of “This site works best with JavaScript enabled”.
But the site should function without JavaScript, even if it’s not very pretty.
