Text über Tabs austauschen

Diskutiere Text über Tabs austauschen im HTML Forum im Bereich Programmierung; Hallo, ich bastel gerade an einer Seite herum und kann folgendes Problem einfach nicht lösen. Neben der Hauptnavigation habe ich zwei Boxen auf...
  • Text über Tabs austauschen Beitrag #1
T
tomie
New member
Beiträge
4
Punkte Reaktionen
0
Hallo,

ich bastel gerade an einer Seite herum und kann folgendes Problem einfach nicht lösen. Neben der Hauptnavigation habe ich zwei Boxen auf meiner Seite die je nachdem was für ein Tab man anklickt einen anderen Text, Grafik oder was auch immer ausgeben sollen. Ich hänge die Grafik einer Box einfach mal an:

tab_test.gif


Wäre schön wenn mir jemand weiterhelfen könnte. Weiss überhaupt nicht mehr weiter.

Danke
 
  • Text über Tabs austauschen Beitrag #2
developr
developr
Teammitglied
Beiträge
336
Punkte Reaktionen
0
Kannst du auch noch deinen Quellcode posten, damit ich das reproduzieren kann?
 
  • Text über Tabs austauschen Beitrag #3
T
tomie
New member
Beiträge
4
Punkte Reaktionen
0
Sorry habe ich total vergessen. Habe jetzt einfach mal den gesamten Code der Seite genommen ausser den apDiv.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Conveyors and components - Rollers</title>
<style type="text/css">
body,td,th {
	font-family: "Arial Rounded MT Bold";
}
body {
	background-image: url(images/backround.gif);
	background-repeat: repeat-y;

</style>
</head>

<body>
<div id="apDiv1"><img src="/images/textbox.gif" width="735" height="222" alt="Marketingbox" /></div>
<div id="apDiv2"><a href="/index.html" target="_parent"><img src="http://www.html-forum.de/images/back.gif" alt="back" width="81" height="28" border="0" /></a></div>
<div id="apDiv4"><img src="/images/surfacefinish.gif" width="86" height="27" alt="Surface Finish" /></div>
<div id="apDiv6"><img src="/images/specification.gif" width="132" height="27" alt="Specification" /></div>
<div id="apDiv8"><img src="/images/roller_hm150.gif" width="270" height="277" alt="Roller HM150" /></div>
<div id="apDiv9"><img src="/images/general.gif" width="225" height="276" alt="general information" /></div>
<div id="apDiv33">General Information</div>
<div id="apDiv10"><img src="/images/cadmodel.gif" width="122" height="23" alt="CAD Model" /></div>
<div id="apDiv11"><img src="/images/datasheet.gif" width="122" height="23" alt="Data Sheet" /></div>
<div id="apDiv12"><img src="/images/manual.gif" width="122" height="23" alt="Installation Manual" /></div>
<div id="apDiv13"><img src="/images/email.gif" width="122" height="23" alt="E-Mail Information" /></div>
<div id="apDiv14"><img src="/images/3dmodel.gif" width="73" height="25" alt="3D Model" /></div>
<div id="apDiv15"><img src="/images/crosssection.gif" width="86" height="25" alt="Cross-Section" /></div>
<div id="apDiv16"><img src="/images/endtype.gif" width="100" height="25" alt="End Type Shaft" /></div>
<div id="apDiv17"><img src="/images/rollerdiameter.gif" width="94" height="47" alt="Roller Diameter" /></div>
<div id="apDiv18">
  <form id="form1" name="form1" method="post" action="">
    <select name="roller_diameter" size="1" id="roller_diameter">
      <option>102</option>
      <option>117</option>
      <option>127</option>
      <option>152</option>
      <option>159</option>
      <option>178</option>
      <option>194</option>
      <option>203</option>
      <option>219</option>
    </select>
  </form>
</div>
<div id="apDiv19"><img src="/images/facelength.gif" width="92" height="47" alt="Facelength" /></div>
<div id="apDiv20">
  <form id="form2" name="form2" method="post" action="">
    <label for="facelength"></label>
    <select name="facelength" size="1" id="facelength">
      <option>320</option>
      <option>400</option>
      <option>450</option>
      <option>520</option>
      <option>580</option>
      <option>610</option>
      <option>660</option>
      <option>720</option>
      <option>800</option>
      <option>860</option>
      <option>900</option>
    </select>
  </form>
</div>
<div id="apDiv21"><img src="/images/bearingsize.gif" width="79" height="47" alt="Bearing Size" /></div>
<div id="apDiv22">
  <form id="form3" name="form3" method="post" action="">
    <label for="bearingsize"></label>
    <select name="bearingsize" id="bearingsize">
      <option>6204</option>
      <option>6208</option>
      <option>6308</option>
      <option>6308</option>
      <option>6310</option>
      <option>6311</option>
      <option>6312</option>
    </select>
  </form>
</div>
<div id="apDiv23"><img src="/images/shaftdiameter.gif" width="92" height="47" alt="Shaft Diameter" /></div>
<div id="apDiv24">
  <form id="form4" name="form4" method="post" action="">
    <label for="shaftdiameter"></label>
    <select name="shaftdiameter" size="1" id="shaftdiameter">
      <option>20</option>
      <option>22</option>
      <option>25</option>
      <option>30</option>
      <option>33</option>
      <option>35</option>
      <option>40</option>
      <option>44</option>
      <option>48</option>
      <option>50</option>
      <option>55</option>
      <option>60</option>
      <option>60</option>
    </select>
  </form>
</div>
<div id="apDiv25"><img src="/images/shellthickens.gif" width="92" height="47" alt="Shell Thickens" /></div>
<div id="apDiv26">
  <form id="form5" name="form5" method="post" action="">
    <label for="shellthickens"></label>
    <select name="shellthickens" size="1" id="shellthickens">
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
    </select>
  </form>
</div>
<div id="apDiv27">
  <form id="form6" name="form6" method="post" action="">
    <input type="submit" name="sendsearch" id="sendsearch" value="Search" />
  </form>
</div>
<div id="apDiv28">
  <form id="form7" name="form7" method="post" action="">
    <label for="searchfield"></label>
    <input type="text" name="searchfield" id="searchfield" />
  </form>
</div>
<div id="apDiv29"><img src="/images/benefits.gif" width="86" height="27" alt="Benefits" /></div>
<div id="apDiv30">> Conveyor components >  Rollers  >  metric  >  heavy duty  >  Steel Rollers<br />
</div>
<div id="apDiv31"><u>Steel Roller</u>       Part No. 123456789</div>
<div id="apDiv35">Search / #PB</div>
<div id="apDiv36">
  <form id="form8" name="form8" method="post" action="">
    <input type="submit" name="Go" id="Go" value="Go" />
  </form>
</div>
<div id="apDiv37">Product Code BA 0007 007
</div>
<div id="apDiv38"><u>Specifications</u>
  <br />
  <br />
  Roller Diameter 	           178 mm<br />
Shaft Diameter                51 mm<br />
Roller length               1450 mm </div>
<div id="apDiv39"> LONG LIFE<br />
  The forming process increases the steel wall thickness by 50% for a length of 100 mm at the center of the roller where the physical loads are the greatest. 1 The rest of the tube wall thickness is reduced by approximately 20% which removes unnecessary material to provide weight reductions. The thicker wall, in combination with a smooth surface finish and fine-grained, work hardened steel, lead to dramatically increased shell wear life at the high wear areas of the roller. With the bearing seats 2 formed as integral part of the shell, the opposing bearings are tightly aligned. Thanks to the increased steel thickness in both the middle of the shell and the seats, deflections are minimized under load. With an excellent surface finish of 0,5 μm (0.02 mil), frictional corrosion is avoided. A high quality labyrinth seal 3 effectively keeps the bearing grease in place. The combined result – a much extended bearing life.
  <p>ENERGY SAVINGS<br />
    In formed rollers, a large diameter tubular shaft 4 can be used. In the process, the diameter is decreased at the bearing ends and the wall thickness increased. The overall impact is an optimum strength-to-weight ratio. In addition the graduated shell thickness provides a reduced rolling mass. With less dead weight and smooth turning, the power consumption is lowered by up to 3 Watts per roller – reduced operating cost.</p>
</div>
<div id="apDiv40"> Sandvik steel rollers are highly versatile. Different sealing elements and bearings determine which type is suitable for different conditions. With this selection Sandvik steel rollers meet customer requirements even in the most extreme conditions. 
  <p>Loadability of one roller is very much dependable on bearing and shaft diameter. These rollers are meant for Light duty usage. More specific information concerning loadability is found in attached selection pages.</p>
</div>
<div id="apDiv41"><img src="/images/standards.gif" width="86" height="27" alt="Standards" /></div>
</body>
</html>
 
Zuletzt bearbeitet:
  • Text über Tabs austauschen Beitrag #4
T
tomie
New member
Beiträge
4
Punkte Reaktionen
0
Habe mich ein wenig weiter Schlau gemacht und man hat mir folgenden Tipp gegeben. Dieses Problem lässt sich wohl nur mittels Java Script (AJAX) lösen. Allerdings sollte man trotzdem ganz normale HTML Seiten entwerfen und hinterlegen falls jemand Java Script deaktiviert hat.
 
  • Text über Tabs austauschen Beitrag #5
developr
developr
Teammitglied
Beiträge
336
Punkte Reaktionen
0
Ja, wobei das nur für Suchmaschinen nützlich ist. Ansonsten hat niemand Java-Script deaktiviert ;). Gibt es einen Grund, dass du die Inhalte nachträglich reinladen möchtest und nicht über PHP einbindest?
 
  • Text über Tabs austauschen Beitrag #6
T
tomie
New member
Beiträge
4
Punkte Reaktionen
0
Ja erstens bin ich in PHP nicht wirklich fit und zweitens darf ich es bei dieser Sache nicht benutzen. Aber ich kenne wirklich ein paar Leute aus dem Admin Bereich die Skripte in Ihrem Browser deaktiviert haben.
 
Thema:

Text über Tabs austauschen

Oben Unten