jquery exmple for tabs RSS

4 replies

Last post Nov 15, 2018 12:09 PM by yogyogi

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
sidu
Member

4 Points

66 Posts

jquery exmple for tabs

Nov 10, 2018 06:29 AM|sidu|LINK

Hi all

this is my html code

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab1.</p>
</div>
<div id='tab2'>
<p>This is the 2nd tab2.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>

please assist to wrtite jquery code, So when i click the tab1 correspond div is to displayed.

thanks and regards

siddu
- Reply
Prathamesh S...
Member

9 Points

19 Posts

Re: jquery exmple for tabs

Nov 10, 2018 10:20 AM|Prathamesh Shende|LINK

Check out the jqueryscript.net
there are so many examples using jquery about tabs

You can also do this using bootstrap.css

check out the examples on bootswatch.com

thank you,

prathamesh shende

Prathamesh Shende

bruce (sqlwo...

All-Star

51684 Points

12499 Posts

Re: jquery exmple for tabs

Nov 11, 2018 08:50 PM|bruce (sqlwork.com)|LINK

pretty simple:

$('.tabs a').click(function(e) {
  var _this = this;
  $('.tabs a').each(function() {
     $(document.getElementById(this.href.split('#')[1]))[this == _this ? 'show' : 'hide']();
  });
}).first().click();

bruce (sqlwork.com)

Jenifer Jian...

Participant

1680 Points

615 Posts

Re: jquery exmple for tabs

Nov 12, 2018 02:09 AM|Jenifer Jiang|LINK

Hi sidu,

You could just create a click function to show the related div when clicking the tab.

I've made a sample on my side and maybe you could refer to.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $(".tabs li").click(function () {
                $(".tabdisplay").hide().eq($(this).index()).show();// hide all divs and show the current div
            })
        })
    </script>
    <style>
        #tab1 {
            display: none;
        }
        #tab2 {
            display: none;
        }
        #tab3 {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <ul class='tabs'>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
            <li><a href='#tab3'>Tab 3</a></li>
        </ul>
        <div id='tab1' class="tabdisplay">
            <p>Hi, this is the first tab1.</p>
        </div>
        <div id='tab2' class="tabdisplay">
            <p>This is the 2nd tab2.</p>
        </div>
        <div id='tab3' class="tabdisplay">
            <p>And this is the 3rd tab.</p>
        </div>
    </div>
</body>
</html>

result.

Best Regards,

Jenifer

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

- Reply
yogyogi
Participant

880 Points

609 Posts

Re: jquery exmple for tabs

Nov 15, 2018 12:09 PM|yogyogi|LINK

Hello Sidu,

You need to apply click event for for these 3 li tags and inside these click events you write jQuery code. The jQuery code should show the relevant div and hide the others. You can see jQuery Tabs tutorial and see how to do it. Hope it helps you to get all your answers.

Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.

‹ Previous Thread|Next Thread ›