Get started with across-tabs CDN

MIT licensed

Across Tabs is a lightweight library that enables messaging and data transfer between tabs in the same browser window.

Tags:
  • across-tabs
  • browser tabs
  • tabs communication
  • tabs postmessage
  • postmessage
  • webpack
  • es6
  • umd
  • commonjs

Stable version

Copied!

How to start using across-tabs CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with across-tabs CDN - cdnhub.io</title>
    <script src="https://cdn.cdnhub.io/across-tabs/1.4.0/across-tabs.min.js"></script>
    <style>
        #tab-container {
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="tab-container">
        <button id="tab-1">Tab 1</button>
        <button id="tab-2">Tab 2</button>
        <div id="tab-content-1">Content for Tab 1</div>
        <div id="tab-content-2" style="display: none;">Content for Tab 2</div>
    </div>

    <script>
        const tabs = new AcrossTabs('#tab-container', {
            initialTab: 0,
            onTabChange: (index) => {
                console.log(`Tab ${index + 1} selected.`);
            },
        });

        document.querySelectorAll('#tab-container button').forEach((button, index) => {
            button.addEventListener('click', () => {
                tabs.selectTab(index);
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions