<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.
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.
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.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
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
Member
75 Points
168 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
All-Star
58254 Points
15682 Posts
Re: jquery exmple for tabs
Nov 11, 2018 08:50 PM|bruce (sqlwork.com)|LINK
pretty simple:
Contributor
2150 Points
705 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
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.
Participant
1253 Points
936 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.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠