Javascript 函数中的 Javascript

Question

I'm obviously not a coder by trade but I'm trying to get this done and can't figureout what I'm missing,

This it my current page : http://dev.clearbridgetech.com/case-studies

Currently if I click on the "By Practice" button the text "Practice......." is outputed to the bottom as expected but instead id like the code below labeled as "Blue JavaScript" below and I just can't figure out how to do this. Any help will be greatly appreciated.

<script language="JavaScript">
function bypractice()
{
document.getElementById("divA").innerHTML="Practice.......";
}
</script></p>
<script language="JavaScript">
function byverticle()
{
document.getElementById("divA").innerHTML="Verticle.......";
}

Blue JavaScript

<p style="text-align: center;">
<a href="javascript:appdev();"><img alt="" src="images/cs-images/appdev.png" style="width: 100px; border-width: 0px; border-style: solid; height: 31px;" /></a>&nbsp; <a href="javascript:cloudcomp();"><img alt="" src="images/cs-images/cloudcomp.png" style="width: 100px; height: 31px; border-width: 0px; border-style: solid;" /></a>&nbsp; <a href="javascript:dbsol();"><img alt="" src="images/cs-images/dbsol.png" style="width: 100px; border-width: 0px; border-style: solid; height: 31px;" /></a>&nbsp; <a href="javascript:dcinfra();"><img alt="" src="images/cs-images/datainfra1.png" style="width: 100px; border-width: 0px; border-style: solid; height: 31px;" /></a></p>

Answer 1

Replace "Practice....." with "< your Blue Javascript HTML here >"

Your HTML code should be inside quotation marks, just as if it were a string. ie document.getElementById('myDiv').innerHTML = "<b style='color:#f00'>This will print red bolded text</b>";

You'll need to use single quotes instead of double quotes in the HTML, or escape your double quotes by adding the '\\' character prior to each quotation mark.

Answer 2

i'm not sure to understand but if what you want is to show different html block (with text, js, images inside it) depending on a clicked button i think you'll find an easier way putting all the different blocks in the page, show the first and hide the others. Then when the user click the buttons you hide the unwanted and vice versa.

You could:

• define a css class .DisplayNone {display: none;}
• assign a name to the different blocks to show (divA, divB, divC) setting class="DisplayNone" to all but the first
• when the user click on a button you assign the DisplayNone class to all the divA, divB, divC blocks with document.getElementById("divA").className="DisplayNone"; and in the end remove it from the block you want to show document.getElementById("divC").className="";
• using jQuery instead of pure javascript might make your code simpler

Answer 3

How about putting all the HTML that you need in a div and applying the style display:none and then on click of button replacing the innerHTML of you div with innerHTML of the hidden div.

Something like this.

function bypractice()
{
document.getElementById("divA").innerHTML=document.getElementById("hiddendiv").innerHTML;
}

DEMO

Answer 4

My good friend was actually able to figure this out rather quickly. "Basically, you're wrapping the tag with the tag, so that the image becomes a link, and, in turn, invokes the JS."

<a href="javascript:appdev();"><img alt="" src="/images/cs-images/appdev.png" style="width: 100px; border-width: 0px; border-style: solid; height: 31px;" /></a>