Content veranderen dmv link in andere div - Softwareontwikkeling

zondag 23 maart 2014 19:53

Acties:

Verwijderd

Topicstarter

Zit hier de hele dag al mee te kloten, hopelijk kunnen jullie me helpen.
Hoe kan content veranderd worden als er op een link (in een andere div) geklikt wordt?

HTML:

<!doctype html>
<html lang="nl">

    <head>

        <title>Titel hier</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">      
        <meta name="description" content="Beschrijving">
        <meta name="author" content="Auteur">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
            
    </head>

    <body>
    
        <div class="container"> <!-- Wrapper, 100% bij 100% -->
        
            <div class="top"> <!-- Witte balk bovenaan pagina -->
            </div>
        
            <center><p class="titel">Titel</p></center> <!-- Titel, Grote tekst boven content -->
                            
            <div class="menu"> <!-- Menu, links van de content div. Bevat menuItems -->

                <div id="menuItem"> <!-- Menu elementen -->
                    <a href="#" id="knop1" class="item" style="color: #4fc1e9">Home</a> <!-- id is nodig zodat het achtergrond script werkt, class is voor de opmaak -->

                    <a href="#" id="knop2" class="item" style="color: #48cfad">Kosten</a>
            
                    <a href="#" id="knop3" class="item" style="color: #ed5565">Contact</a>
                </div>
                
            </div>
            
            <div id="content"> <!-- Main content van de pagina, moet veranderen als er op een link geklikt wordt -->
                Content
            </div>
            
        </div>
        
        <!-- Script zorgt ervoor dat achtergrond veranderd als er op een menuItem geklikt wordt -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="jquery.backstretch.js"></script>
        <script>
            $.backstretch("aqua.jpg", {fade: 500});
        
            $("#knop1").click(function (e) {
                e.preventDefault();
                $.backstretch("aqua.jpg");
            });
        
            $("#knop2").click(function (e) {
                e.preventDefault();
                $.backstretch("mint.jpg");
            });
        
            $("#knop3").click(function (e) {
                e.preventDefault();
                $.backstretch("grapefruit.jpg");
            });
        </script>
        
    </body>

</html>

Cascading Stylesheet:

body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    }
        
.container {
    width: 100%;
    height: 100%;
    }
    
.top {
    width: 100%;
    height:5%;
    background-color: #fff;
    }
    
#content {
    width: 100%;
    height: 55%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 10%;
    }
    
.titel {
    color: #fff;
    font-size: 150pt;
    margin-left: 10px;
    line-height: 0px;
    }
    
.menu {
    background-color: #fff;
    width: 10%;
    position: absolute;
    bottom: 0;
    height: 55%;
    }
    
#menuItem {
    width: 200px;
    height: 50px;
    }

#menuItem:hover {
    width: 200px;
    height: 50px;
    }

    
.item {
    display: block;
    padding: 10px;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    color: #ff0000;
    font-size: 18px;
    margin-left: 12px;
    }

Heb het wel voor elkaar gekregen zonder divjes maar dan klopt m'n opmaak niet meer.

-edit-

Deze manier heb ik ook gevonden:

HTML:

<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>


#knop1:focus~#content div:nth-child(1),
#knop2:focus~#content div:nth-child(2),
#knop3:focus~#content div:nth-child(3){display:block;}


#home,#kosten,#contact {display:none;}

</style>

</head>
<body>

<a id="knop1" href="#" tabindex="1">Home</a>
<a id="knop2" href="#" tabindex="2">Kosten</a>
<a id="knop3" href="#" tabindex="3">contact</a>


<div id="content"> 
 <div id="home">home</div>
 <div id="kosten">kosten.</div>
 <div id="contact">contact</div>
</div>

</body>
</html>

Maar dit werkt alleen als ik m'n divjes weghaal.

[ Voor 10% gewijzigd door Verwijderd op 23-03-2014 20:00 ]

zondag 23 maart 2014 20:30

Acties:

Xatom

♫

Je wilt dus dat als er op een menu item geklikt wordt dat de inhoud van de content div verandert?

Dit kan op verschillende manieren.

Het makkelijkste is een iframe. Maak een iframe in de content div en geef deze een name. Nu kan je bij de menu items target="name" gebruiken om de link te laten openen in de iframe.

Voorbeeld (je moet de iframe nog wel een hoogte en een breedte meegeven):

code:

<a id="knop1" href="#" tabindex="1" target="frame1">Home</a>
<a id="knop2" href="#" tabindex="2" target="frame1">Kosten</a>
<a id="knop3" href="#" tabindex="3" target="frame1">contact</a>


<div id="content"> 
<iframe name="frame1">
</div>

Zelf zou ik alleen geen iframe gebruiken, het is makkelijk maar het wordt gezien als een aparte webpagina, dus je kan niet meer (makkelijk) vanuit de parent bij de iframe en vanuit de iframe bij de parent.

Je kan ook doen dat als je op de knop klikt de content div vult d.m.v. AJAX. Dit kan met jQuery of met 'plain' JavaScript. jQuery: https://api.jquery.com/jQuery.ajax/. Roep dan gewoon een URL op met de inhoud van content en plaats deze in je pagina met JavaScript/jQuery.

Als laatste kan je natuurlijk ook nog PHP gebruiken.

maandag 24 maart 2014 11:22

Acties:

Rekcor

HTML:

<a href="#" data-target="home">Home</a>
<a href="#" data-target="kosten">Kosten</a>
<a href="#" date-target="contact">contact</a>

<div id="content"></div>

<div id="repository">
  <div id="home">home</div>
  <div  id="kosten">kosten</div>
  <div  id="contact">contact</div>
</div>

Cascading Stylesheet:

1
2
3

#repository{
  display:none;
}

JavaScript:

$('a').on('click', function(){
 //move content children to repository
 $('#repository').append($('#content').children());

 //move target from repository to content
 $('#content').append($('#'+ $(this).attr('data-target')); 
}