Frage Tab Menü Seite springt nach oben

blackpickupline · 15 April 2016

Hallo liebe Community,

ich habe ein Problem mit meinem Tab Menü, leider springt die Seite jedesmal nach oben, sobald man ein Bild anklickt. Wie kann ich das verhindern?

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Potato</title>
   

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

</script>


</head>

<body>

<style type="text/css">

.display {
margin: 0px 0px 0px 0px;
width: 1070px;
font-family: arial;
font-size: 11pt;
}

.tabs-menu {
height: 210px;
float: left;
clear: both;
}

.tabs-menu li {
float: left;
}

.tab {
float: left;
}

.tab-content {
width: 1070px;
padding: 20px;
display: none;
}


</style>

<div class="display">

<img src="http://www.wirtschaftstreuhand.de/images/slider/optimized/world.jpg" style="margin: 0 0 300px 0;" />


<div id="tabs-container">
    <ul class="tabs-menu" style="list-style-type: none; margin-left: 0px; padding-left: 0px;">
        <li class="current" style="margin-right: 10px;"><a href="#tab-1"><img src="http://darylcygler.com/wp-content/uploads/2015/02/potato-e1429290207790.jpg"/></li>
       
        <li style="margin-right: 10px;"><a href="#tab-2"><img src="http://darylcygler.com/wp-content/uploads/2015/02/potato-e1429290207790.jpg"/></a></li>
       
        <li><a href="#tab-3"><img src="http://darylcygler.com/wp-content/uploads/2015/02/potato-e1429290207790.jpg"/></a></li>
    </ul>
   
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <p>text</p>
        </div>
        <div id="tab-2" class="tab-content">
            <p>text2</p>
       
        </div>
        <div id="tab-3" class="tab-content">
            <p>text3</p>
        </div>
        <div id="tab-4" class="tab-content">
            <p>text4</p>
        </div>
    </div>
</div>





</div>    <!-- Ende display -->

</body>
</html>

Vielen lieben Dank im Voraus
blackpickupline

Frage Tab Menü Seite springt nach oben

blackpickupline

Neues Mitglied

Neueste Beiträge