Today I was working on a tab navigation for a webpage. I tried the Sliding Doors approach which worked fine. Then I realized that I must include an option to delete a tab (usually a small X in the right corner of each tab).
I wanted to use a nested anchor, which didn't work because it is not allowed. Then I saw the tab- navigation at Pageflakes, which was actually working (including nested hyperlinks). Why?
They must be doing some really crazy stuff with JavaScript to get it to work (notice how neither the parent nor the nested anchor tags have a name or href attribute - all functionality is done through the class name and JS).
Here is what the html looks like:
<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>
Actually, the code I had pasted previously was the generated DOM, after all JS manipulation. If you don't have the Firebug extension for Firefox, you should get it now.
Edit: Deleted the old post, it was no longer useful. Firebug is, so this one is staying :)
I suspect that working or not working nested links might depend if your browser renders page in strict mode (e.g. XHTML DTD, application/xml+html MIMEtype), or in "quirks" mode.
In spite of nested tags are illegal but writing them using JS will work!, try this:
$('<a>', {
href: 'http://google.com',
html: '<a>i am nested anchor </a>I am top Anchor'
}).appendTo($('body'))
来源：https://stackoverflow.com/questions/20926/nesting-html-anchor-tags