Laden...

[JavaScript, ASP.NET] Tabs und SubTabs realisieren

Erstellt von Yheeky vor 14 Jahren Letzter Beitrag vor 14 Jahren 1.239 Views
Y
Yheeky Themenstarter:in
200 Beiträge seit 2008
vor 14 Jahren
[JavaScript, ASP.NET] Tabs und SubTabs realisieren

Hi,

ich habe folgendes Problem: ich habe ein ASP.NET MVC Projekt mit einer Masterseite. Auf der Masterseite habe ich eine HTML Struktur, die mir eine Tab-Navigation ermöglicht. Diese sieht so aus:


<div id="Tabs">
	<ul id="MainTabs">
		<li><a href="#Users">Users</a></li>
		<li><a href="#Products">Products</a></li>
	</ul>
	<div id="Users">
		<div id="SubTabs">
			<a href ="/CreateUser"><div id="SubTabUserCreate">Create user</div></a>
		        <a href ="/EditUser"><div id="SubTabUserEdit">Edit user</div></a>
            		<a href ="/DeleteUser"><div id="SubTabUserDelete">Delete user</div></a>
        	</div>
	</div>
	<div id="Products">
		<div id="SubTabs">
			<a href ="/CreateProduct"><div id="SubTabProductCreate">Create product</div></a>
            		<a href ="/EditProduct"><div id="SubTabProductEdit">Edit product</div></a>
            		<a href ="/DeleteProduct"><div id="SubTabProductDelete">Delete product</div></a>
        	</div>
	</div>
</div>

Ich habe auf meiner Masterseite zudem ein Javascript, was bei einem Click auf die Tabs, Untertabs aufruft:


<script type="text/javascript">
        $(function () {
            var tabContainers = $('div#Tabs > div');
    
            $('div#Tabs ul#MainTabs a').click(function () {
                tabContainers.hide().filter(this.hash).fadeIn();
        
                $('div#Tabs ul#MainTabs a').removeClass('selected');
                $(this).addClass('selected');
            });
        });
    </script>

Wenn ich nun auf einer Unterseite wechsele möchte ich, dass trotzdem das betreffende Tab zur Auswahl steht, also aufgerufen wird. Beispiel:
Auf meiner User-Seite werden ja ohnehin die Tabs angezeigt, weil sie auf der Masters-Seite sind. Ich möchte nun aber, dass auch die betreffenden User-Tabs aufgeklappt sind. Dies habe ich mit folgendem Script auf der User-Seite versucht:

<script type="text/javascript">
    $(function() {
        $('div#Tabs ul#MainTabs div#Users').click();
    });
</script>

Dies funktioniert aber leider nicht. Kann mir jemand vielleicht helfen, wieso das nicht funktioniert und mir sagen, was ich da machen muss, damit es läuft? Wäre super, danke!

Viele Grüße,
Yheeky

S
138 Beiträge seit 2006
vor 14 Jahren

Vlt hilft dir das ein bisschen weiter... Man muss das Rad ja nicht immer neu erfinden 😉

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Tabs/Tabs.aspx

Y
Yheeky Themenstarter:in
200 Beiträge seit 2008
vor 14 Jahren

Danke für den Link, aber das Ajax-Control bringt mir nicht so viel. Es wird kein SubTabbing unterstützt und ich habe jetzt schon alles auf die andere Variante umgestellt. Wäre super, wenn jemand noch einen Lösungsansatz für meine eigentliche Variante findet 😃

Gruß Yheeky