I am making an event to check if specific tab page in a tab control is active.
The point is, it will trigger an event if that tab page in a tab control is the currently selected tab. Any code that will give me what I need?
enter code here <div class="col-lg-6">
<nav class="wow fadeInUp">
<div class="nav nav-underline border-bottom" id="nav-tab" role="tablist">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-cement" type="button" id="btn_cement" role="tab" aria-selected="true">tab1</button>
<button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-realestate" type="button" role="tab" aria-selected="false">tab2</button>
<button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-infrastructure" type="button" role="tab" aria-selected="false">tab3</button>
<button class="nav-link ms-md-3" data-bs-toggle="tab" data-bs-target="#tab-chemicals" type="button" role="tab" aria-selected="false">tab4</button>
</div>
</nav>
2
Answers
@saurabh MAURYA Since the tab control needs to be clicked, try using the click event.
Well, you can (and probably should) adopt one of "many" (a gazillion) examples of a tab control. Adopt "one" that you like that works well, and use it for the next 10 years.
I like the jQuery.UI ones. However, often I just drop in a Radiobutton list, and use that!
So, say I have these 2 buttons (RadiobuttonList)
So, then below above, I have 2 divs with content for the 2 buttons.
so, then this:
and
So, now in code behind (or with JavaScript), I can click on either button, and thus this:
So, we simple hide one div, and show the other based on the RadioButton choice.
I used a RadioButtonList, since THEN it automatic remembers which button is selected.
The above result thus looks like this:
Or perhaps consider a jQuery.UI tab control. It "also" manages which tab (button) is selected for you, and again is rather easy to adopt.
eg: (this is jQuery AND jQuery.UI).
Result:
So, you can actually quite well "roll your own" tab system, and the above RadioButtonList example works well, since "which" button is selected is "managed" for you, and you do need a "wee bit" of code to set/change which div below is visible.
And as noted, there are BOATLOADS of add-ins for free if you wish to adopting existing examples.
However, I think going with a "wide spread" used add-in such as bootstrap, or jQuery.UI is a better choice, and thus the above jQuery.UI "tab" control example is a good choice, and a choice that has many "users" and thus "many" examples exist for the jQuery.UI tab control.
You also not stated if you want the selected value for server side (code behind), or do you want the selected value for client side code?