screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" data-type="module"> const { useState } = React; const App = () => { const [activeTab, setActiveTab] = useState(0); const tabs = [ { label: "Tab 1", content: "Content for Tab 1" }, { label: "Tab 2", content: "Content for Tab 2" }, { label: "Tab 3", content: "Content for Tab 3" }, // Add more tabs as needed ]; const handleTabClick = (index) => { setActiveTab(index); }; return ( <div className="container"> <h3>React Js Change Active Tabs Color onclick</h3> <div className="tab-container"> {tabs.map((tab, index) => ( <div key={index} className={`tab-item ${activeTab === index ? "active" : ""}`} onClick={() => handleTabClick(index)} > {tab.label} </div> ))} </div> <div className="tab-content">{tabs[activeTab].content}</div> </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); </script> <style> body { margin: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; } .tab-container { display: flex; } .tab-item { padding: 10px 20px; margin-right: 10px; cursor: pointer; background-color: #f0f0f0; } .tab-item.active { background-color: #007bff; /* Change to the desired color for the active tab */ color: white; /* Change to the desired color for the text of the active tab */ } .tab-content { margin-top: 20px; padding: 10px; border: 1px solid #007bff; /* Change to the desired color for the tab content border */ } </style> </body> </html>