tabbed content, een open andere weer sluiten.

Status
Niet open voor verdere reacties.
T

thapriest

Gebruiker
Lid geworden
28 okt 2009
Berichten
559
Beste,

ik heb het volgende:

Javascript
[JS]<script type="text/javascript" language="javascript">
function navigationAllInactive() {

onavigation = document.getElementById('navigation');
oLis = onavigation.getElementsByTagName('LI');

for (i = 0; i < oLis.length; i++) {

oLis.className = ''; }}

function hideAllcontent() {

ocontent = document.getElementById('content');

oDivs = ocontent.getElementsByTagName('DIV');

for (i = 0; i < oDivs.length; i++) { oDivs.style.display = 'none'; }}

function doShow(o, pageId) {
hideAllcontent();
navigationAllInactive();
o.className = 'active';
ocontent = document.getElementById(pageId);
ocontent.style.display = 'block';

return false;}

</script>[/JS]

De css:
Code: 
<style>

	#tab {  
	padding: 15px;} 
	
	#tab #navigation { 
	margin-bottom: 0px; 
	margin-left: 0px;
	 margin-top:5px;}
	
	#tab  {  
	h4st-style: none;  
	margin: 0px;  
	padding: 0px;} 
	
	#tab
	#navigation  h4 {  
	display: inline;	  
	padding: 4px 15px; 
	cursor: pointer;  
	background-image:url(img/but_nav_geel.png);  
	border: 1px solid #3da0d4;  
	border-bottom: none;  
	margin-right: 0px;} 
	
#tab #navigation  h4.active {  	
	  
		} 
	
	#tab #navigation  h4:hover {
        padding:8px 20px;  
	background-image:url(img/but_nav_blauw.png);
	color:#FFFFFF}
	
	#tab #content {  
	margin-top: 3px;} 
	
	#tab #content div {  
	display: none;  
	border: 1px solid #3da0d4;  
	padding: 10px;} 
	
	#tab #content div.active {  
	display: block;}

</style>

De aanroep:(gedeeltelijk)
HTML: 
echo'<div id= "tab">
	<div id="navigation">
		
		<h4 onclick="javascript:doShow(this, \'een\');">Algemeen</h4> 
		<h4 onclick="javascript:doShow(this, \'twee\');">Faciliteiten</h4> 
		<h4 onclick="javascript:doShow(this, \'drie\');">Accommodatie</h4> 
		<h4 onclick="javascript:doShow(this, \'vier\');">Prijsoverzicht</h4> 
		<h4 onclick="javascript:doShow(this, \'vijf\');">Vluchtinfo</h4> 
		 </div>		<div id="content">
		 <div id="een" class="active">
		 <h3>'. $naam.'</h3>
		'.$infoAlgemeen.'

		 </div>

Nu wil ik bereiken , dat waneer ik een tab open doe, de andere tab verdwijnt(in totaal een tab of vijf.
Dus dat er maar eentje tegelijk open is, maar ik ben clueless na een aantal uren proberen..

IEmand een idee?
 
Dus, wat is je vraag? Werkt je code niet?

zo snel zie ik geen problemen, kan je toevallig ergens een demo online zetten, of anders een werkende pagina (gewoon een bron) hier neerzetten?
 
Nou hij werkt wel, maar niet zoals ik dat wil, ik probeer de volledige code in php in te pakken, dit moet ik om hem in Modx te kunnen gebruiken.
Ik krijg het in Modx zo ver voor elkaar dat hij de tabs wel laatzien, maar dan bouwt hij ze vrolijk onder elkaar door, dus bij aanklikken van een tab komt ie onder de eerste actieve enz.

Onderstaande heb ik gauw even bij elkaar gezet.om er een bron van te maken.

PHP: 
<!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>Acoomodatie Informatie</title>

<style>

	#tab {  
	padding: 15px;} 
	
	#tab #navigation { 
	margin-bottom: 0px; 
	margin-left: 0px;
	 margin-top:5px;}
	
	#tab h4  {  
	h4st-style: none;  
	margin: 0px;  
	padding: 0px;} 
	
	#tab
	#navigation  h4 {  
	display: inline;	  
	padding: 4px 15px; 
	cursor: pointer;  
	background-image:url(img/but_nav_geel.png);  
	border: 1px solid #3da0d4;  
	border-bottom: none;  
	margin-right: 0px;} 
	
#tab #navigation  h4.active {  	
	  border: 1px solid #3da0d4;
	  border-bottom: 1px solid white;
	  background-color: #ffffff;
		} 
	
	#tab #navigation  h4:hover {
        padding:8px 20px;  
	background-color:#FFFFFF;}
	
	#tab #content {  
	margin-top: 3px;
	} 
	
	#tab #content div {  
	display: none;  
	border: 1px solid #3da0d4;  
	padding: 10px;
	
	
	#tab #content div.active {  
	display: block;
	}

</style>



<script type="text/javascript" language="javascript">
function navigationAllInactive() { 
 
oNavigation = document.getElementById('navigation');  
oLis = oNavigation.getElementsByTagName('LI');   

for (i = 0; i < oLis.length; i++) {    

oLis[i].className = '';  }} 

function hideAllData() {  

oData = document.getElementById('content');  

oDivs = oData.getElementsByTagName('DIV');   

for (i = 0; i < oDivs.length; i++) {    oDivs[i].style.display = 'none';  
}
} 

function doShow(o, pageId) { 
 hideAllData();  
 navigationAllInactive();  
o.className = 'active';  
oData = document.getElementById(pageId);  
oData.style.display = 'block';   

return false;}

</script>

</head>
<?php
error_reporting(E_ALL);
include 'dbconnect.php';
if ( isset ($_GET["id"]) ) {




$sql = mysql_query("SELECT * FROM accomodations "); // tabelnaam veranderen in het juiste naam van de tabel
 while($record = mysql_fetch_array($sql)) {
		$thumbnail = $record['thumbnail'];
        $reis_id=$record['id'];
        $land_id = $record['land_id'];
        $code = $record['code'];
        $alias = $record['alias'];
        $naam = $record['naam'];
        $plaats = $record['plaats'];
        $intro = $record['intro'];
        $vanafPrijs = $record['vanafPrijs'];
        $infoAlgemeen = $record['infoAlgemeen'];
        $infoFaciliteiten = $record['infoFaciliteiten'];
        $acco=$record['accomodatieTypes'];
        $klasse = $record['klasse'];
		$infoAccomodatie = $record['infoAccomodatie'];
  		}
		
} 

echo '<div id= "tab">
	<div id="navigation">
		
		<h4 onclick="javascript:doShow(this, \'een\');">Algemeen</h4> 
		<h4 onclick="javascript:doShow(this, \'twee\');">Faciliteiten</h4> 
		<h4 onclick="javascript:doShow(this, \'drie\');">Accommodatie</h4> 
		<h4 onclick="javascript:doShow(this, \'vier\');">Prijsoverzicht</h4> 
		<h4 onclick="javascript:doShow(this, \'vijf\');">Vluchtinfo</h4> 
		 </div>		<div id="content">
		 <div id="een">
		 <h3>'. $naam.'</h3>
		 '.$infoAlgemeen. '

		 </div>
		 <div id="twee">
		 '. $infoFaciliteiten.'
		 </div>
		 <div id="drie">
		'. $infoAccomodatie.'
		 </div>
		 <div id="vier">
		 4e tab
		 </div>
		 <div id="vijf">
		 5e tab
		 </div>
		 </div>
		 </div>
		 HAllo
		 </body> </html>';

?>
 
Okay,

first of all: wat is ModX?

daarnaast: wat ik eigenlijk bedoelde is een output-bron. Dus, open die pagina die je hebt in een browser, dan rechtermuisknop, en dan 'bron weergeven' (oid). En die code hier plakken. Wij hebben namelijk je tabel accomodations niet, en kunnen daarom de code niet testen ;)




:thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan