2008-08-21 16 views
12

Dzisiaj pracowałem nad nawigacją po zakładce dla strony internetowej. Próbowałem podejście Sliding Doors, które działało dobrze. Wtedy zdałem sobie sprawę, że muszę dołączyć opcję usunięcia karty (zazwyczaj małe X w prawym rogu każdej zakładki).Zagnieżdżanie znaczników zakotwiczenia HTML

Chciałem użyć zagnieżdżonej kotwicy, która nie działała, ponieważ jest dozwolona pod warunkiem, że jest not. Potem zobaczyłem nawigację tabulatora pod adresem Pageflakes, która faktycznie działała (w tym zagnieżdżone hiperłącza). Czemu?

Odpowiedz

9

Muszą robić naprawdę szalone rzeczy przy pomocy JavaScriptu, aby je uruchomić (zauważ, że ani rodzic, ani zagnieżdżone znaczniki kotwicy nie mają nazwy lub atrybutu href - cała funkcjonalność jest wykonywana poprzez nazwę klasy i JS).

Oto co html wygląda następująco:

<a class="page_tab page_tab"> 
    <div class="page_title" title="Click to rename this page.">Click & Type Page Name</div> 
    <a class="delete_page" title="Click to delete this page" style="display: block;">X</a> 
</a> 
0

Faktycznie, kod miałem wklejony wcześniej był generowany DOM, po tych wszystkich manipulacji JS. Jeśli nie masz rozszerzenia Firebug dla Firefox, powinieneś je teraz pobrać.

Edytuj: Usunięto stary wpis, nie był już przydatny. Firebug jest, więc ten pozostaje :)

0

Podejrzewam, że działające lub nie działa zagnieżdżone linki mogą zależeć od tego, czy Twoja przeglądarka renderuje stronę w trybie ścisłym (np. XHTML DTD, application/xml + html MIMEtype), czy w "dziwactwach" "tryb.

15
+0

Czy to prawda, HTML 5? Nie widzę tego. http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-a-element – Sean

+3

Widzę to, ale wyświetlenie go zajęło mi trochę czasu. Na stronie, do której się odwołujesz: "Element może być zawijany wokół całych akapitów, list, tabel itd., Nawet całe sekcje, o ile nie ma w nich interaktywnej treści (np. Przycisków lub innych linków)." – Lori

0

Pomimo zagnieżdżonych znaczników są nielegalne, ale pisać je za pomocą JS zadziała !, spróbuj tego:

$('<a>', { 
    href: 'http://google.com', 
    html: '<a>i am nested anchor </a>I am top Anchor' 
}).appendTo($('body'))