ورود / ثبت نام
0
0

دریافت Bootstrap tab فعال در رویداد کلیک با استفاده از jQuery

219 بازدید
Bootstrap Tab

Bootstrap Tab

در این مقاله نشان می دهیم که چگونه برای دریافت و تشخیص bootstrap tab انتخاب شده در رویداد کلیک و یا دریافت و تنظیم مقدار تب انتخاب شده در رویداد change از جی کوئری استفاده نماییم. با استفاده از ویژگی data-toggle در رویداد تغییر تب می توانیم مقدار آن را به دست آوریم.

Bootstrap tab

برای دریافت مقدار تب باید کد زیر را در جی کوئری استفاده نماییم.

<script type="text/javascript">
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href")
alert(target);
});
})
</script>

اگر بخواهیم آن را به عنوان یک مثال کامل بررسی کنیم، کد آن به شکل زیر خواهد بود:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Bootstrap Tabs Click Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href")
alert(target);
});
})
</script>
</head>
<body>
<form id="form1"><br />
<ul class="nav nav-tabs" style="width:30%; margin-left:30%;">
<li><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab3</a></li>
</ul>
<div style="width:30%;margin-left:30%">
<div class="tab-content" id="tabs">
<div class="tab-pane" id="tab1">...Sample Tab1...</div>
<div class="tab-pane" id="tab2">...Sample Tab2...</div>
<div class="tab-pane" id="tab3">...Sample Tab3...</div>
</div>
</div>
</form>
</body>
</html>

موفق باشید !

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17824
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد دریافت Bootstrap tab فعال در رویداد کلیک با استفاده از jQuery

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.