|
|
@@ -269,7 +269,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
- $(".list-tabs li").click(function(){
|
|
|
+ /*$(".list-tabs li").click(function(){
|
|
|
+ console.log(11111)
|
|
|
$(".list-tabs li").each(function(){
|
|
|
$(this).removeAttr("class","active");
|
|
|
var id='#'+$(this).find("span").html();
|
|
|
@@ -284,7 +285,7 @@
|
|
|
substationContainer.style.display = 'block';
|
|
|
$(id).removeAttr("class","hide");
|
|
|
|
|
|
- })
|
|
|
+ })*/
|
|
|
|
|
|
|
|
|
});
|
|
|
@@ -470,7 +471,7 @@
|
|
|
<ul class="list-tabs" id="tabsList">
|
|
|
<li style="display: none;" class="active projectFinalAccounts"><a>工程项目竣工结算汇总表</a><span class="hide">projectFinalAccounts</span></li>
|
|
|
<li style="display: none;" class=" projectSubstation"><a>变电站建筑工程费用汇总表</a><span class="hide">projectSubstation</span></li>
|
|
|
- <li style="display: none;" class="projectInfo"><a>现场签证汇总表</a><span class="hide">projectInfo</span></li>
|
|
|
+ <li style="display: none;" class="projectInfo"><a>其他</a><span class="hide">projectInfo</span></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
@@ -847,58 +848,95 @@
|
|
|
var $ = layui.jquery;
|
|
|
|
|
|
// 获取核心元素
|
|
|
- var tabScroll = document.getElementById('tabScroll'); // 滚动容器（原生DOM，操作更直接）
|
|
|
+ var tabScroll = document.getElementById('tabScroll');
|
|
|
var tabsList = document.getElementById('tabsList');
|
|
|
var leftBtn = document.getElementById('leftBtn');
|
|
|
var rightBtn = document.getElementById('rightBtn');
|
|
|
-
|
|
|
- // 滚动步长（每次点击滚动的像素）
|
|
|
var scrollStep = 250;
|
|
|
|
|
|
- // 检查箭头状态
|
|
|
+ // 检查箭头状态（原有逻辑不变）
|
|
|
function updateButtons() {
|
|
|
- // 容器可滚动的最大距离 = 内容总宽度 - 容器可视宽度
|
|
|
var maxScroll = tabsList.scrollWidth - tabScroll.clientWidth;
|
|
|
-
|
|
|
- // 左箭头：滚动到最左侧时禁用
|
|
|
leftBtn.disabled = tabScroll.scrollLeft <= 0;
|
|
|
-
|
|
|
- // 右箭头：滚动到最右侧时禁用（留5px误差）
|
|
|
rightBtn.disabled = tabScroll.scrollLeft >= (maxScroll - 5);
|
|
|
}
|
|
|
|
|
|
- // 左滚动
|
|
|
+ // 左/右滚动（原有逻辑不变）
|
|
|
leftBtn.addEventListener('click', function() {
|
|
|
if (!this.disabled) {
|
|
|
tabScroll.scrollLeft -= scrollStep;
|
|
|
- // 手动触发状态检查（滚动事件可能有延迟）
|
|
|
setTimeout(updateButtons, 50);
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
- // 右滚动
|
|
|
rightBtn.addEventListener('click', function() {
|
|
|
if (!this.disabled) {
|
|
|
tabScroll.scrollLeft += scrollStep;
|
|
|
- // 手动触发状态检查
|
|
|
setTimeout(updateButtons, 50);
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
- // 滚动时自动更新箭头状态
|
|
|
tabScroll.addEventListener('scroll', updateButtons);
|
|
|
-
|
|
|
- // 窗口大小改变时重新计算
|
|
|
window.addEventListener('resize', updateButtons);
|
|
|
|
|
|
- // 页签切换
|
|
|
- $('#tabsList li').click(function(e) {
|
|
|
- e.preventDefault();
|
|
|
- $(this).addClass('active').siblings().removeClass('active');
|
|
|
- // 这里可以添加内容切换逻辑
|
|
|
+ // ========== 核心新增：初始化内容显示 + 修正切换逻辑 ==========
|
|
|
+ $(function() {
|
|
|
+ // 🌟 步骤1：初始化 - 默认显示第一个li对应的内容，其他隐藏
|
|
|
+ var firstLi = $(".list-tabs li:first");
|
|
|
+ var firstIdKey = firstLi.find("span").html(); // 第一个li的span内容（如projectFinalAccounts）
|
|
|
+ // 初始化第一个li为active，其他li移除active
|
|
|
+ $(".list-tabs li").removeClass("active");
|
|
|
+ firstLi.addClass("active");
|
|
|
+ // 初始化内容显示：第一个内容显示，其他隐藏
|
|
|
+ $(".list-tabs li").each(function() {
|
|
|
+ var idKey = $(this).find("span").html();
|
|
|
+ var contentContainer = $('#' + idKey);
|
|
|
+ if (idKey === firstIdKey) {
|
|
|
+ contentContainer.removeClass("hide").css("display", "block"); // 显示第一个
|
|
|
+ } else {
|
|
|
+ contentContainer.addClass("hide").css("display", "none"); // 隐藏其他
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 🌟 步骤2：页签点击切换（保留内容切换+仅操作active+容错）
|
|
|
+ $(".list-tabs li").off('click').on('click', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ e.stopPropagation();
|
|
|
+
|
|
|
+ console.log(11111);
|
|
|
+
|
|
|
+ // 1. 遍历所有li：仅移除active类 + 隐藏对应内容（容错：容器不存在不报错）
|
|
|
+ $(".list-tabs li").each(function() {
|
|
|
+ $(this).removeClass("active"); // 仅删active，保留固定class
|
|
|
+ var idKey = $(this).find("span").html();
|
|
|
+ var contentContainer = $('#' + idKey);
|
|
|
+ if (contentContainer.length > 0) { // 容错：检查容器是否存在
|
|
|
+ contentContainer.addClass("hide").css("display", "none");
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log('this', this);
|
|
|
+
|
|
|
+ // 2. 给当前li加active类（保留固定class）
|
|
|
+ $(this).addClass("active");
|
|
|
+
|
|
|
+ // 3. 显示当前li对应的内容（强化容错）
|
|
|
+ var idKey = $(this).find("span").html();
|
|
|
+ var contentContainer = $('#' + idKey);
|
|
|
+ console.log('idKey', idKey);
|
|
|
+
|
|
|
+ // 容错：容器不存在时提示，避免报错
|
|
|
+ if (contentContainer.length === 0) {
|
|
|
+ console.warn('⚠️ 未找到内容容器：', idKey);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 强制显示内容（同时移除hide类+设置display）
|
|
|
+ contentContainer.removeClass("hide").css("display", "block");
|
|
|
+
|
|
|
+ // 验证：打印当前li的class，确认固定class保留
|
|
|
+ console.log('当前li的完整class：', $(this).attr('class'));
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
- // 初始化检查状态
|
|
|
+ // 初始化箭头状态
|
|
|
updateButtons();
|
|
|
});
|
|
|
</script>
|
