Antwort an „envoy“ verfassen

Anker funktioniert nicht richtig

envoy 20.03.2024 13:09 (Versionen)

Hallo,

ich versuche gerade einfache Verknüpfungen zwischen verschiedenen Member Inhalten zu setzten. Es funktioniert aber nicht sauber, ich komme zwar zum richtigen Member, z.B. Member2, wenn ich aber dann über die thumb imgs ein Member vor oder zurück gehe, ist die Reihenfolge nicht richtig, springt immer 2 Schritte weiter. Wenn ich nur über die thumb imgs gehe, kann ich die Member saueber ansprechen. Was kann ich anders machen, um über einen Text-Link zu den Membern zu kommen?

Viele Grüße

<!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></title>         
        <link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>         
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script> 
           
    $(document).ready(function() {
	var AnzahlMember=$('div.Member').length;
	var MemberSliderLaenge=AnzahlMember*1000;
	$('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'});
	});


    function MemberSlider(MemberNr) {
	var ZielPosition=(MemberNr-1)*1000;
	$('#MemberSlider').css({'left':'-'+ZielPosition+'px'});
	}

    function spiegelPanelSelect(spiegelPanel) {
	$('.spiegelPanel').css({'display':'none'});
	$('#'+spiegelPanel).fadeIn( "1000", function() {
	});
	$('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow');
	}

    $(document).ready(function() {
	$('.rectangle').click(function(){
	$('.spiegelPanel').css({'display':'none'});
	$('#MemberWrapper').css({'display':'block','opacity':1.0});
	});
    });

    </script>
        <style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>
    </head>     
    <body> 
        <div id="spiegelWrapper"> 
            <div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed> 
</div>             
        </div>         
        <div id="MemberWrapper"> 
            <style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>             
            <div id="MemberSlider"> 
                <div id="Member1" class="Member" data-pg-collapsed> 
                    <p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p> 
                    <img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div>
                <div id="Member2" class="Member" data-pg-collapsed> 
                    <p class="text">2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member8"> Member5 </a> </p> 
                    <img onClick="MemberSlider(1);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(3);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div>
                <div id="Member3" class="Member" data-pg-collapsed> 
                    <p class="text">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
                    <img onClick="MemberSlider(2);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(4);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div>
                <div id="Member4" class="Member" data-pg-collapsed> 
                    <p class="text">4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
                    <img onClick="MemberSlider(3);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(5);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div>
                <div id="Member5" class="Member" data-pg-collapsed> 
                    <p class="text">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
                    <img onClick="MemberSlider(4);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(6);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div>
                <div id="Member6" class="Member" data-pg-collapsed> 
                    <p class="text">6. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
                    <img onClick="MemberSlider(5);" class="rectangle" src="images/button_L.png" border="0"/> 
                    <img onClick="MemberSlider(1);" class="rectangle" src="images/Button_R.png" border="0"/> 
                </div
            </div>
        </div>
        <div id="navi"> 
            <div style="width:960px; margin:0 auto;">
                <div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer">
                    <img class="rectangle" src="01.jpg"/>
                </div>                 
            </div>             
        </div>

Quelltext hier

Betreff

Autor

E-Mail-Adresse freiwillig, öffentlich sichtbar

Homepage freiwillig, öffentlich sichtbar

problematische Seite freiwillig, öffentlich sichtbar

Beitragstext

> Hallo,
> 
> ich versuche gerade einfache Verknüpfungen zwischen verschiedenen Member Inhalten zu setzten. Es funktioniert aber nicht sauber, ich komme zwar zum richtigen Member, z.B. Member2, wenn ich aber dann über die thumb imgs ein Member vor oder zurück gehe, ist die Reihenfolge nicht richtig, springt immer 2 Schritte weiter. Wenn ich nur über die thumb imgs gehe, kann ich die Member saueber ansprechen. Was kann ich anders machen, um über einen Text-Link zu den Membern zu kommen?
> 
> Viele Grüße
> 
> 
> 
> ~~~html
> <!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></title>         
>         <link href="css/Fenster.css" rel="stylesheet" type="text/css" media="screen"/> 
>         <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>         
>         <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
>         <script> 
>            
>     $(document).ready(function() {
> 	var AnzahlMember=$('div.Member').length;
> 	var MemberSliderLaenge=AnzahlMember*1000;
> 	$('#MemberSlider').css({'width':''+MemberSliderLaenge+'px'});
> 	});
> 
> 
>     function MemberSlider(MemberNr) {
> 	var ZielPosition=(MemberNr-1)*1000;
> 	$('#MemberSlider').css({'left':'-'+ZielPosition+'px'});
> 	}
> 
>     function spiegelPanelSelect(spiegelPanel) {
> 	$('.spiegelPanel').css({'display':'none'});
> 	$('#'+spiegelPanel).fadeIn( "1000", function() {
> 	});
> 	$('#MemberWrapper').delay(10).animate ({ 'opacity':0.0 }, 'slow');
> 	}
> 
>     $(document).ready(function() {
> 	$('.rectangle').click(function(){
> 	$('.spiegelPanel').css({'display':'none'});
> 	$('#MemberWrapper').css({'display':'block','opacity':1.0});
> 	});
>     });
> 
>     </script>
>         <style>.rectangle { opacity: 1.0; cursor: pointer; } body { margin: 0px; padding: 0px; background-color: rgb(53, 61, 64); color: rgb(255, 255, 255); height: 100%; overflow-x: hidden; } #spiegelWrapper { position: absolute; z-index: 1000; } #navi { position: fixed; z-index: 2000; left: 0px; width: 100%; bottom: 0px; height: 180px; } #MemberWrapper { position: absolute; z-index: 100; margin-top: 20px; width: 1000px; overflow-x: hidden; display: none; } .Member { width: 1000px; float: left; padding: 0px 0px 0px 0px; }</style>
>     </head>     
>     <body> 
>         <div id="spiegelWrapper"> 
>             <div id="spiegelPanel2" class="spiegelPanel" data-pg-collapsed> 
> </div>             
>         </div>         
>         <div id="MemberWrapper"> 
>             <style>#MemberSlider { border: none; position: relative; overflow: visible; }</style>             
>             <div id="MemberSlider"> 
>                 <div id="Member1" class="Member" data-pg-collapsed> 
>                     <p class="text">1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member2"> Member2 </a> </p> 
>                     <img onClick="MemberSlider(9);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(2);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div>
>                 <div id="Member2" class="Member" data-pg-collapsed> 
>                     <p class="text">2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="#Member8"> Member5 </a> </p> 
>                     <img onClick="MemberSlider(1);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(3);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div>
>                 <div id="Member3" class="Member" data-pg-collapsed> 
>                     <p class="text">3. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
>                     <img onClick="MemberSlider(2);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(4);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div>
>                 <div id="Member4" class="Member" data-pg-collapsed> 
>                     <p class="text">4. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
>                     <img onClick="MemberSlider(3);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(5);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div>
>                 <div id="Member5" class="Member" data-pg-collapsed> 
>                     <p class="text">5. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
>                     <img onClick="MemberSlider(4);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(6);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div>
>                 <div id="Member6" class="Member" data-pg-collapsed> 
>                     <p class="text">6. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> 
>                     <img onClick="MemberSlider(5);" class="rectangle" src="images/button_L.png" border="0"/> 
>                     <img onClick="MemberSlider(1);" class="rectangle" src="images/Button_R.png" border="0"/> 
>                 </div
>             </div>
>         </div>
>         <div id="navi"> 
>             <div style="width:960px; margin:0 auto;">
>                 <div class="buttonWrapper" onClick="MemberSlider(1);" style="cursor:pointer">
>                     <img class="rectangle" src="01.jpg"/>
>                 </div>                 
>             </div>             
>         </div>
> 
> Quelltext hier
> ~~~

Tag 1
Tag 2
Tag 3

speichere die Identität in einem Cookie

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

Formulieren Sie bitte höflich und wertschätzend.
Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
Ihr Beitrag wird dauerhaft archiviert.

abbrechen