I have a webform in which i am trying to implement tabs using bootstrap 4. The content for 1st tab is shown fine but when I switch tabs the content for the second tab is shown under the previous content and the tabs dont switch. Below is my code:
<nav class="nav nav-tabs nav-justified">
<a class="nav-item nav-link active" data-toggle="tab" href="#teacher">Teacher Remarks</a>
<a class="nav-item nav-link" data-toggle="tab" href="#marks">Marks</a>
</nav>
<div class="tab-content">
<div id="teacher" role="tabpanel" class="tab-pane fade show active" aria-labelledby="teacher">
<asp:UpdatePanel id="updPnl1">
<ContentTemplate>
Content of div1
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="marks" role="tabpanel" class="tab-pane fade show active" aria-labelledby="marks">
<asp:UpdatePanel id="updPnl2">
<ContentTemplate>
Content of div2
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Can someone please help? I dont understand what I am doing wrong?
You've marked both tabpanels as show active, which means they will both display by default on a page load. Try removing the show and active classes from the second div.
Edit: As per the comments below, the solution was to put the tab panel for the second tab within the first tab panel.
Related
On my aspx page I have the following list items/divs. Is there a way to make the tab in position 1 (divReferralTab) the selected tab on page load by referencing the div or the list item?
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liReferralTab" runat="server">Referral</li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
</div>
If I understand you right, you can try setting the z-index of the control you need first.
https://www.w3schools.com/cssref/pr_pos_z-index.asp
If you want the referral "bullet" first then try just listing it first:
<div id="mainTabs" class="povMainTabs">
<ul id="ulMainTabs" runat="server">
<li id="liReferralTab" runat="server">Referral</li>
<li id="liRDCTab" runat="server"><asp:Label runat="server" ID="lblRDC" /></li>
<li id="liContactsTab" runat="server">Holistic/Contact</li>
</ul>
<div id="divRDCTab"></div>
<div id="divReferralTab"></div>
<div id="divContactsTab"></div>
I have in a razor page the following bootstrap tab layout:
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#overview" data-toggle="tab" >overview</a></li>
<li><a href="#Profil" data-toggle="tab" >Profil</a></li>
<li><a href="#bla" data-toggle="tab" >Bla</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="overview">
<p>overview
</div>
<div class="tab-pane fade in active" id="Profil">
<p>Profil
</div>
<div class="tab-pane fade in active" id="bla">
<p>bla
</div>
</div>
All working fine, except: How can i call the same page with a different tab and content active?
Obviously if i do a
return RedirectToAction("Edit", "Profil");
to the same view and controller method it takes the initial html.
What could be a solution for that?
I already thought in setting a tempdata string like so:
#TempData["activatesecondtab"] = "2ndtabactive";
and would do then in my razor page:
if(#TempData["activatesecondtab"] == "2ndtabactive")
use this html
else
use that html
...but it doesn't accept the condition like this...
How to keep tab active after postback ASP.Net Core … best way to do it!!
So I have a button in one of my bootstrap tab-content and I have about 5 nav-tabs. What I want to do is when you click on the button to go to the final tab and launch a new window at the same time.
Here is what I've tried.
<a href="#done"
onClick="window.open('https://amazon.com', '_blank')"
class="btn btn-success"> Marketplace</a>
It launches the new window but the tab doesn't move to the final tab. Any thoughts?
Use a click handler that handles the bootstrap tab change and opens a window. You can put the URL you want for each tab in a data attribute of the element and read that in dynamically.
Since the SO sandbox won't allow a popup, here's a codepen https://codepen.io/anon/pen/dRYOmE
$('#myTabs a').on('click', function (e) {
e.preventDefault()
$(this).tab('show');
window.open($(this).attr('data-url'), '_blank');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">home</div>
<div role="tabpanel" class="tab-pane" id="profile">profile</div>
<div role="tabpanel" class="tab-pane" id="messages">messages</div>
</div>
</div>
Using Bootstrap's Tabs, ASP.NET LinkButtons are not firing events while inside of the tab-content div.
HTML
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
<asp:Button runat="server" ID="btnQuestions" />
</li>
<li role="presentation" class="active" runat="server" id="liComments" href="#comments" role="tab" data-toggle="tab">
<asp:Button runat="server" ID="btnComments" />
</li>
<li role="presentation" class="active" runat="server" id="liAttachments" href="#attachments" role="tab" data-toggle="tab">
<asp:Button runat="server" ID="btnAttachments" />
</li>
<li role="presentation" class="active" runat="server" id="liTracking" href="#tracking" role="tab" data-toggle="tab">
<asp:Button runat="server" ID="btnTracking" />
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="questions">
<asp:LinkButton runat="server" ID="lbQuestions" CausesValidation="false"></asp:LinkButton>
</div>
<div role="tabpanel" class="tab-pane" id="comments">
<asp:LinkButton runat="server" ID="lbComments" OnClick="lbComments_Click"></asp:LinkButton>
</div>
<div role="tabpanel" class="tab-pane" id="attachments">
</div>
<div role="tabpanel" class="tab-pane" id="tracking">
</div>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
lbQuestions.Click += lbComments_Click
}
...
protected void lbComments_Click(object sender, EventArgs e)
{
Console.Write("This breakpoint never gets hit");
}
Neither methods of adding the OnClick event are firing while the LinkButtons are inside of the <div class="tab-content"> div.
Oddly, asp Buttons work perfectly. However I'm unable to use the Glyphicons inside of the Buttons, or just Glyphicons as buttons themselves if I have to settle for that. -- I also need the ability to use CommandArgument/CommandName, so a simple HTML button will not suite my needs either.
The problem is likely the JS that initializes the tabs plugin. Look at that preventDefault there:
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Consider putting a class on the buttons that you want to behave as tabs and modify your JS to the following:
$('#myTabs a.myTabbedButton').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The actual problem is in code itself..
Parser Error Message: The tag contains duplicate 'role' attributes.
Could you please check the code.
<li role="presentation" class="active" runat="server" id="liQuestions" href="#questions" role="tab" data-toggle="tab">
<asp:Button runat="server" ID="btnQuestions" />
</li>
2 role is added (role="presentation" and role="tab").
Also don't forget to add ";" after lbQuestions.Click += lbComments_Click
It works fine for me.Hope you got the issue.
Attempt 1
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active">Homeaaa</li>
<li>Profilefff</li>
<li>Messagesbbb</li>
</ul>
</div>
JSfiddle
I have also tried setting a data-toggle attribute to "tab", but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.
This should be possible to be done without any JavaScript.
Attempt 2
The closest I've gotten to a working one is:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JSfiddle
But this didn't change the URL of the viewer to /#ter or /#gin on click. Also it doesn't seem to work normally in the fiddle...
Your jsFiddle works as expected -- anchor links take you to #gin and #ter. On the other hand, I believe you need to use some JavaScript to actually change the active tab. Here's a try that uses a bit of jQuery:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Stir
</li>
<li>
Drink
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ter">fff</div>
<div class="tab-pane" id="gin">ggg</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(".nav-tabs li a").click(function() {
var li = $(this).parent("li");
var wch = this.getAttribute("href");
$(li).addClass("active"); //make current li active
$(li).siblings("li").removeClass("active"); //make others inactive
$(".tab-content div").removeClass("active"); //make all tabs inactive first
$(wch).addClass("active"); //activate our tab;
return false; //don't change URL
});
});
And a little demo: little link. Note that the use of jQuery isn't needed; you can easily convert to vanilla JavaScript if you want to avoid using it.
Hope that helped!