File: //proc/37321/root/www/wwwroot/tixi.xxlht.com/m.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tab and Carousel Example</title>
<style>
/* 基本样式 */
body {
font-family: Arial, sans-serif;
}
.tabs {
display: flex;
overflow-x: auto;
scrollbar-width: none; /* 隐藏滚动条 Firefox */
-ms-overflow-style: none; /* 隐藏滚动条 IE 10+ */
}
.tabs::-webkit-scrollbar {
display: none; /* 隐藏滚动条 Chrome 和 Safari */
}
.tab {
padding: 10px 20px;
border: 1px solid #ccc;
margin-right: 5px;
cursor: pointer;
}
.tab.active {
background-color: #f0f0f0;
border-bottom: none;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<!-- Tab 切换组件 -->
<div class="tabs">
<div class="tab active" data-tab="1">Tab 1</div>
<div class="tab" data-tab="2">Tab 2</div>
<div class="tab" data-tab="3">Tab 3</div>
</div>
<div class="tab-content active" id="tab-1">Content for Tab 1</div>
<div class="tab-content" id="tab-2">Content for Tab 2</div>
<div class="tab-content" id="tab-3">Content for Tab 3</div>
<script>
// Tab 切换功能
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
this.classList.add('active');
document.getElementById(`tab-${this.dataset.tab}`).classList.add('active');
});
});
// 左右滑动功能
let isDown = false;
let startX;
let scrollLeft;
document.querySelector('.tabs').addEventListener('mousedown', (e) => {
isDown = true;
startX = e.pageX - document.querySelector('.tabs').offsetLeft;
scrollLeft = document.querySelector('.tabs').scrollLeft;
});
document.querySelector('.tabs').addEventListener('mouseleave', () => {
isDown = false;
});
document.querySelector('.tabs').addEventListener('mouseup', () => {
isDown = false;
});
document.querySelector('.tabs').addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - document.querySelector('.tabs').offsetLeft;
const walk = (x - startX) * 2; // 调整滑动速度
document.querySelector('.tabs').scrollLeft = scrollLeft - walk;
});
</script>
</body>
</html>