Javascript html changing
I am using some javascript to dynamically change a webpage, and I am trying to make it change some html as well, but if I have the html in the javascript, it won't even execute the beginning parts. Here is my javascript:
function Home()
{
document.getElementById("title").innerHTML=("Home");
document.getElementById("bodyfill").innerHTML=("Home stuff here");
var newHTMLHome = "a href="#" title="Home" class="active">Home/a>";
document.getElementById('hometab').innerHTML = newHTMLHome;
var newHTMLUser = "a href="javascript:User()" title="Home" class="active">Home/a>";
document.getElementById('usertab').innerHTML = newHTMLUser;
}
function User()
{
document.getElementById("title").innerHTML=("User");
document.getElementById("bodyfill").i开发者_JAVA百科nnerHTML=("User stuff here");
var newHTMLHome = "a href="javascript:Home()" title="Home" class="active">Home/a>";
document.getElementById('hometab').innerHTML = newHTMLHome;
var newHTMLUser = "a href="#" title="Home" class="active">Home/a>";
document.getElementById('usertab').innerHTML = newHTMLUser;
}
I am trying to get it to change the active tab dynamically, which is what this is supposed to do, but it doesn't, any ideas why? If you need more code let me know. Thanks in advance!
Edit: Had to change the links code, just assume the tags are correct in that case
Your problem is that you don't escape special characters in string, for example:
var newHTMLHome = "<a href="#" title="Home" class="active">Home</a>";
Instead, try something like:
var newHTMLHome = '<a href="#" title="Home" class="active">Home</a>';
Please take a look here or hereto fully understand what happens.
Is that your exact code copied and pasted? If so.. You can't have double quotes inside double quotes like that. Check your javascript error console, you most likely have some errors there. Try replacing the double quotes inside your strings with single quotes.
Also, is there a reason you aren't using a JS library like jquery (http://jquery.com)? They make things like this so much easier.
I'm going to skip telling you about escaping your quotes and point you in another direction as you may be trying to reinvent the wheel here.
There are a number of great toolkits out there that will do tabbed layouts for you. I'm going to recommend jQuery and jQueryUI although there are other Javascript libraries out there.
The demo page for the jQuery UI tabs will tell you all you need to do to make it work. Once you've followed the demo, you just need to go to the jQuery UI download page and tick the box for the tabs feature and it'll give you a nice downloadable package to get started.
The advantage of using jQuery (or any other UI toolkit like this) is that you are using something built by many people who are interested in enhancing these projects to be keyboard accessible and also interested in fixing any bugs - in some ways, it means you can let others do the hard work while you focus on making a better website/application.
精彩评论