Menu
i need to display the a.php,b.php,c.php in the tabs tab2,tab3,tab4 respectively i have written the following code but the links a.php,b.php,c.php is not displaying in the tabs tab2,tab3,tab4 respectively instead of that if i click on the tab2 it redirects to the a.php page but i need to display in a tab manner in which if i click the tab2 it should display the a.php in the tab2 respectively what should i change to display the links on the tab ? kindly help me Thanks in advance
<script >
$('#tab2').load('a.php');
$('#tab3').load('b.php');
$('#tab4').load('c.php');
</script>
</head>
<body>
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Status</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Settings</a></li>
<li class=""><a href="#tab4" data-toggle="tab">Help</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
</body>
373
You can change the href link by using $("#tab1").attr("href", "#a.php");
$(function(){
$("#tab1").attr("href", "#a");
$("#tab2").attr("href", "#b");
$("#tab3").attr("href", "#c");
$("#tab4").attr("href", "#d");
});
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
<ul class="tabs-menu">
<li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
<li><a id="tab2" href="#tab-2">Tab 2</a></li>
<li><a id="tab3" href="#tab-3">Tab 3</a></li>
<li><a id="tab4" href="#tab-4">Tab 4</a></li>
</ul>
<div class="tab">
<div id="a" class="tab-content">
<p>Tesing a.php </p>
</div>
<div id="b" class="tab-content">
<p>Tesing b.php </p>
</div>
<div id="c" class="tab-content">
<p>Tesing c.php </p>
</div>
<div id="d" class="tab-content">
<p>Tesing d.php </p>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
