I'm trying to get set an html attribute in a tabpanel.
Here is the tabcontainer and the first tabpanel below. I am trying to set an attribute on the <a> tag of the tabpanel. I use the tpStage.Attributes.Add("aria-selected", "true") command. This sets the attribute on a <div> tag that contains the actual content.
I get why that happens, but how do I set the attribute on the <a> tag of the tabpanel instead of the content of the tabpanel? TIA
Currently I am afraid that you cannot directly change the header for the tab container. As you can see, if you access the tab, every attribute you add will be applied on the content div. It is a by-design behavior.
If you simply want to add the attribute on the <a> tag, one workaround is using javascript to find the target <a> tag in the active tab and assign it with the "aria_selected" attribute.
For example, since you do post back every time the user click the tab header, you could add the attribute when the page is loaded.
<script type="text/javascript">
$(function () {
var tabHeader = $('.ajax__tab_active');
var tabAnchor = tabHeader.find("a[class=ajax__tab_tab]");
tabAnchor.attr("aria-selected","true");
});
</script>
Hope this can help you.
Best regards,
Sean
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
If you still meet problems, you can post it here and people here will be happy to solve the problem.
If you find that the answer does solve your issues, I suggest you mark the answer. This will help other people who faces the same issue to find the right answer faster.
Thank you for understanding.
Best regards,
Sean
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Ok, so one add in to this, and it is important. The underline and the attributes seem to work fine in the pageLoaded client side asp.net ajax client side javascript event, but they only seem to work right the first time. I also had to add this code to
run on the end request client side event. The interesting thing is that the end request event didn't run on the first load of the page, which actually makes since end request only runs after an async page request. Bottom line, I had to run this in both events.
I just created a new method and called that method from both events that I setup. Hopefully, some of this helps. :-)
Member
42 Points
432 Posts
ASPInsiders
MVP
TabContainer & TabPanel - html attributes
Jul 13, 2020 06:25 PM|Wallym|LINK
I'm trying to get set an html attribute in a tabpanel.
Here is the tabcontainer and the first tabpanel below. I am trying to set an attribute on the <a> tag of the tabpanel. I use the tpStage.Attributes.Add("aria-selected", "true") command. This sets the attribute on a <div> tag that contains the actual content. I get why that happens, but how do I set the attribute on the <a> tag of the tabpanel instead of the content of the tabpanel? TIA
<actk:TabContainer ID="tcMain" runat="server"
OnActiveTabChanged="tcMain_ActiveTabChanged"
AutoPostBack="true" CssClass="MyTabStyle" role="tablist">
<actk:TabPanel HeaderText="Stage"
runat="server" ID="tpStage" AccessKey="2">
<HeaderTemplate>
Stage
</HeaderTemplate>
<ContentTemplate>
The result html is:
Contributor
2840 Points
840 Posts
Re: TabContainer & TabPanel - html attributes
Jul 14, 2020 06:06 AM|Sean Fang|LINK
Hi Wallym,
Currently I am afraid that you cannot directly change the header for the tab container. As you can see, if you access the tab, every attribute you add will be applied on the content div. It is a by-design behavior.
If you simply want to add the attribute on the <a> tag, one workaround is using javascript to find the target <a> tag in the active tab and assign it with the "aria_selected" attribute.
For example, since you do post back every time the user click the tab header, you could add the attribute when the page is loaded.
<script type="text/javascript"> $(function () { var tabHeader = $('.ajax__tab_active'); var tabAnchor = tabHeader.find("a[class=ajax__tab_tab]"); tabAnchor.attr("aria-selected","true"); }); </script>Hope this can help you.
Best regards,
Sean
Member
42 Points
432 Posts
ASPInsiders
MVP
Re: TabContainer & TabPanel - html attributes
Jul 15, 2020 12:44 PM|Wallym|LINK
Thank you for the info and the js code. :-)
Wally
Contributor
2840 Points
840 Posts
Re: TabContainer & TabPanel - html attributes
Jul 29, 2020 09:49 AM|Sean Fang|LINK
Hi Wallym,
I would be glad if it could help you.
If you still meet problems, you can post it here and people here will be happy to solve the problem.
If you find that the answer does solve your issues, I suggest you mark the answer. This will help other people who faces the same issue to find the right answer faster.
Thank you for understanding.
Best regards,
Sean
Member
42 Points
432 Posts
ASPInsiders
MVP
Re: TabContainer & TabPanel - html attributes
Aug 10, 2020 02:35 PM|Wallym|LINK
It worked perfectly. Thanks.
Member
42 Points
432 Posts
ASPInsiders
MVP
Re: TabContainer & TabPanel - html attributes
Aug 20, 2020 07:23 PM|Wallym|LINK
Ok, so one add in to this, and it is important. The underline and the attributes seem to work fine in the pageLoaded client side asp.net ajax client side javascript event, but they only seem to work right the first time. I also had to add this code to run on the end request client side event. The interesting thing is that the end request event didn't run on the first load of the page, which actually makes since end request only runs after an async page request. Bottom line, I had to run this in both events. I just created a new method and called that method from both events that I setup. Hopefully, some of this helps. :-)