[Solved] This code does’t run and gives no error [closed]

by


You forgot to remove the remove class so it stays hidden. No need for all the if statements, one option is to add a data-tabid to your anchors and use that as the id to display the divs.

<!DOCTYPE html>
<html>
 <head>
<script src="https://stackoverflow.com/questions/17261287/jquery-1.9.0.js"></script>
<title>test</title>
<style type="text/css"> 
    body, html, div, ul,li,a  {margin:0; padding:0;}
    body {font-family:arial;font-size:12px;}
    .clear {clear:both;}
    a img {border:none;}
    ul {
        list-style:none;
        position:relative; 
        z-index:2;
        top:1px;
        display:table;
        border-left:1px solid #f5ab36;
        }
    ul li {float:left;}
    ul li a {
        background:#ffd89b;
        color:#222;
        display:block;
        padding:6px 15px;
        text-decoration:none;
        border-right:1px solid #f5ab36;
        border-top:1px solid #f5ab36;
        border-right:1px solid #f5ab36;
        }
    ul li a.selected  
    {
        border-bottom:1px solid #fff;
        color:#344385;
        background:#fff;
    }
    h1 {
            display:block;
            width:600px;
            margin:0 auto;
            padding:20px 0;
            color:#fff;
        }
    #navigation {width:602px; margin: 0 auto;}
    .content {width:600px; margin:0 auto;height:200px;background:#fff;border:1px solid #f5ab36;z-index:1;text-align:center;padding:10px 0; display:block;}
    #logo {width:600px; margin:0 auto; padding:10px 0; text-align:right;}
    .remove
    {
        display:none;
    }
</style> 

</head> 

<body> 
<h1>Simple tabbed menu</h1> 

<div id="navigation"> 
    <ul> 
        <li ><a href="javascript:void(0);" id="1" data-tabid="tab1" class="">Tab 1</a></li> 
        <li><a class="" href="javascript:void(0);" id="2" data-tabid="tab2">Tab 2</a></li> 
        <li><a class="" href="javascript:void(0);" id="3" data-tabid="tab3">Tab 3</a></li> 
        <li><a class="" href="javascript:void(0);" id="4" data-tabid="tab4">Tab 4</a></li> 
        <li><a class="selected" href="javascript:void(0);" id="5" data-tabid="tab5">Tab 5</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
<div id="remove1">
    <div id="tab1" class="">
     pannel doesn't always shows everythings
    </div>
     <div id="tab2" class="">
    this is not a favorit glass
     </div>
    <div id="tab3" class="">Oh my god we don't have such strong idea</div>
    <div id="tab4" class="">my favorit pannel is hear</div>
    <div id="tab5" class="">Do not talk too much</div>      
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#remove1 div').addClass('remove');
        $('#remove1 div').removeClass('content');
        $("#tab5").addClass('content');
        $('#tab5').removeClass('remove');

        $('#navigation ul a').click(function () {
            var tabID = this.getAttribute("data-tabid")
                .toString();
            $('#navigation ul a').removeClass('selected');
            $(this).addClass('selected');
            $('#remove1 div').addClass('remove');
            $('#' + tabID).addClass('content');
            $('#' + tabID).removeClass('remove');
        });


    });
</script> 



</body></html>

solved This code does’t run and gives no error [closed]