Member Avatar for abelingaw

I just wanna know how to enable tab switching without the whole page reloading. When i click a tab, the page would appear on a form or lets say a part of a page (e.g <div>).

Dont want to use frame.

And i would like to know how to have a drop down from tabs, like the one from this site on the menus.

  • 3 Contributors
  • 4 Replies
  • 111 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by abelingaw

Dani AI

Generated

Good call by to use lists — they give a semantic base for both tabs and dropdowns. For a smooth, no-reload experience the priorities are the same whether you use a tiny script or a library: semantic markup, ARIA roles, keyboard support, and progressive enhancement so the UI still works without JavaScript. and were right that libraries speed things up, but a short, accessible script keeps behavior predictable and easy to debug.

Use the ARIA tab pattern (role="tablist", role="tab", role="tabpanel") and keep the active panel hidden with hidden or aria-hidden. On activation update aria-selected and move focus appropriately. Example of a minimal click handler that does that:

document.addEventListener('click', e => {
  const tab = e.target.closest('[role="tab"]');
  if (!tab) return;
  e.preventDefault();
  const list = tab.closest('[role="tablist"]');
  list.querySelectorAll('[role="tab"]').forEach(t => t.setAttribute('aria-selected','false'));
  tab.setAttribute('aria-selected','true');
  document.querySelectorAll('[role="tabpanel"]').forEach(p => p.hidden = true);
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
});

For dropdowns, nested <ul> markup is correct — but avoid relying only on :hover since touch devices have no hover. Toggle an .open class on the parent on click/touch, keep the menu focusable, and follow the ARIA menubutton pattern for screen-reader users (see the WAI-ARIA patterns for tabs and menubuttons: WAI-ARIA tab pattern and WAI-ARIA menubutton pattern).

If content is large, fetch panels on demand and use the History API to preserve back/URL behavior (Fetch API, History.pushState). Test with keyboard-only navigation, a screen reader, and on mobile. Common pitfalls: forgetting aria-controls, not managing focus, and leaving JS-only keyboard handlers out.

Recommended Answers

All 4 Replies

Member Avatar for urtrivedi

for MENU you may user superfish.
for tabs you may use JQUERY-UI-TABS

Member Avatar for abelingaw

Are those softwares sir? I would only like to use pure html or css.

Member Avatar for Arkinder

It might be possible with psuedo-classes, but you would have to be very careful about where you place each element - more trouble that it's worth.

jQuery is a JavaScript library that allows you to do things like this with very little code - 4-8 lines. So I definitely recommend going with that.

Regards
Arkinder

Member Avatar for abelingaw

Found a solution.. I tried using list.

echo "      <li><span><a href=\"INSERT URL HERE\">News</a></span>\n";
echo "	  <ul class=\"level-1\">\n";
echo "          <li><span><a href=\"INSERT URL HERE\">School Campus</a></span></li>\n"; 
echo "          <li><span><a href=\"INSERT URL HERE\">Activity for the Month</a></span></li>\n"; 
echo "          <li><span><a href=\"INSERT URL HERE\">Administration Updates</a></span>\n"; 
echo "        </ul>\n";

Tried the JQuery and got some new idea from it. Thanks . Thread Solved

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.