Stuck on creating a simple jQuery tab

Question

<!DOCTYPE html>
<html>
    <head>
    <title>Test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

        <script>

             $(function() {
                $( "#tabs" ).tabs();
            });
        </script>
    </head>
    <body>
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Nunc tincidunt</a></li>
                    <li><a href="#tabs-2">Proin dolor</a></li>
                    <li><a href="#tabs-3">Aenean lacinia</a></li>
                </ul>
                <div id="tabs-1">
                    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
                </div>
                <div id="tabs-2">
                    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
                </div>
                <div id="tabs-3">
                    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
                    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
                </div>
            </div>

</body>
</html>

I have checked the code above line by line and couldn't find the reason why it is not working. I have seen many similar examples and their code looks the same, but mine doesn't work. Can someone please help me.

Answer 1

you dont need to add jquery UI for simple tabs, instead use the following code

load jquery UI styles or do the following alternative solution

Script .js

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript">
   $(function(){
     $('ul.header li').on("click",function(){

       $('.tab_content > div').hide();
       $('#tab-'+($(this).index()+1)).fadeIn();

       /* for adding slected class */
       $('.selected_li').removeClass('selected_li');
       $(this).addClass('selected_li');
     });
   });
</script>

Style.css

<style>
  .tab_content > div {
    display: none;
  }
  .tab_content > #tab-1 {
    display: block;
  }
</style>

HTML

 <ul class="header">
  <li class="selected_li">Nunc tincidunt</li>
  <li>Proin dolor</li>
  <li>Proin dolor</li>
</ul>
<div class="tab_content">
  <div id="tab-1" >test content 1</div>
  <div id="tab-2">test content  2</div>
  <div id="tab-3">test content  3</div>
</div> <!-- tab_content -->

Thanks and let me know if this helps

UPDATE :- Do the Following Style for Better look

<style>
  .tab_content > div {
    display: none;
  }
  .tab_content > #tab-1 {
    display: block;
  }

  .header {
    padding: 0; margin: 0;
  }
  .header li {
    float: left;
    background: #FFF;
    color: #036; cursor: pointer;
    padding: 8px; border: 1px solid #036;
  }
  .header .selected_li {
    background: #036;
    color: #FFF;
  }
  .clear {
    clear:both;
  }
  .tab_content {
    padding: 8px;
    border: 1px solid #036;
  }
</style>

thanks

Answer 2

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"/></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"/></script>

        <script type="text/javascript">
            $(function() {
                $("#tabs").tabs();
            });
        </script>

</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
        </div>
    </div>

</body>
</html>

Stuck on creating a simple jQuery tab

Question

2 answers

solution1
0 2014-05-09 16:05:00

solution2
0 2014-05-09 16:56:46

Stuck on creating a simple jQuery tab

Question

2 answers

solution1 0 2014-05-09 16:05:00

solution2 0 2014-05-09 16:56:46

solution1
0 2014-05-09 16:05:00

solution2
0 2014-05-09 16:56:46