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!!
Related
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.
I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
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>
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
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!