3-25 div3

编程竞赛与算法解析

挺久没打cf了。

A Strange Table

题意:给出一个m*n的矩阵,每一个点填入一个数字,把从左向右,从上向下递增的模式称为“by rows”的矩阵,把从上向下,从左向右的递增的模式称为“by colons”的模式,问以“by colons”模式排列的数字矩阵中x位置在“by rows”的数字矩阵中是多大

分析:
将x转化为矩阵的坐标,再通过坐标写出“by rows”相应位置的矩阵的数值
代码:

#include<bits/stdc++.h> 

using namespace std;
typedef long long ll;

 main() {
 	int t;
    ll n,m,x,row,col;
    cin>>t;
    while(t--)
    {
    cin>>n>>m>>x;
    row=(x-1)%n+1;
    col=(x-1)/n+1;
    cout<<(row-1)*m+col<<endl;
	}
}

B. Partial Replacement

题意:
给出一个以‘.’和’*‘组成的字符串,通过将’ * ‘改为‘x’使得满足:
原始字符串的第一个和最后一个‘ * ’一定要被改为‘ x ’
每个x之间的距离不大于k
题目说明原始字符串的每一个’ * ’相隔不超过k(也就是说一定是有解的)
要求最少改几个’ * '使得满足题意

分析:
我们将第一个和最后一个‘ * '改为‘ x ',但是一般情况下中间会隔着许多
所以我们要通过把’ * ‘改为’ x ‘使得他们之间连通起来,很明显,改的’ * ‘的位置是贪心的,要在能连通的情况下,选取最远的’ * ’
代码:

#include<bits/stdc++.h>
typedef long long ll;

using namespace std;

int a[55];
int main()
{
	string s;
	int t,cnt,ans,n,k,last;
	cin>>t;
	while(t--)
	{
		cnt=0,ans=2;
		cin>>n>>k;
		cin>>s;
		for(int i=0;i<s.size();++i)
		if(s[i]=='*')
		a[cnt++]=i;
		last=a[0];
		int maxnow=a[0];
		for(int i=0;i<cnt;++i)
		{
			if(a[i]-last>k)
			++ans,last=maxnow,maxnow=a[i];
			else 
			maxnow=max(maxnow,a[i]);
		}
		if(cnt==1)
		ans=1;
		cout<<ans<<endl;
	}
	
}

错误原因:
遇到a[i]-last>k的情况的时候只顾着把last设置为maxnow和++ans了,没有意识到此时maxnow也要变为a[i],下一次循环不会再处理此时的a[i]了

C. Double-ended Strings

题意:找最长公共子串
代码:

#include<bits/stdc++.h>
typedef long long ll;

using namespace std;

int dp[25][25];
int main()
{
	int t;
	cin>>t;
	string x,y;
	int ans=0;
	while(t--)
	{
		ans=0;
		cin>>x>>y;
		for(int i=1;i<=x.size();++i)
		{
			for(int j=1;j<=y.size();++j)
			{
				if(x[i-1]==y[j-1])
				dp[i][j]=dp[i-1][j-1]+1;
				else 
				dp[i][j]=0;
				ans=max(ans,dp[i][j]);
			}
		}
		cout<<x.size()+y.size()-ans*2<<endl;
	}
	
}

D. Epic Transformation

题意:给出一个长度为n的序列,如果ai和aj的值不同,那么可以消去,问最后最少还剩几个元素

分析:通过简单分析,可以发现,每次要把最大的两个往小了减,那么就模拟,用map把每个值的次数存起来,放到优先队列里,每次取出两个最大的数减1,时间复杂度O(nlogn)。
或者进一步分析,发现要么是奇数剩一个,要么是所有小的加起来都比不上最大的,其他都会被消完(反正我是没发现)
代码:

#include<iostream>
#include<algorithm>
#include<map>
#include<vector>
#include<queue>
#include<string>
#include<string.h>
#include<stack>
typedef long long ll;

using namespace std;

//1<=1e9 1<=n<=2e5 1<=t<=1e4
int main()
{
	int t,n,x;
	cin>>t;
	while(t--)
	{
		map<int,int> mp;
		priority_queue<int> q;
		cin>>n;
	for(int i=0;i<n;++i)
	scanf("%d",&x),mp[x]++;
	for(map<int,int>::iterator it=mp.begin();it!=mp.end();it++)
	{
		q.push((*it).second);
	}
	int m1,m2;
	int ans=n;
	while(q.size()>=2)
	{
		m1=q.top();
		q.pop();
		m2=q.top();
		q.pop();
		ans-=2;
		if(m1-1)
		q.push(m1-1);
		if(m2-1)
		q.push(m2-1);
	}
	cout<<ans<<endl;
	}
	
}

E. Restoring the Permutation

题意:
说不清楚
分析:
很容易可以想到,出现增长的点必须取那个值,相等的话,最小的话就从小往大取,最大的就从该值从大往小取,然后注意取过的值不能取要调过。
用vis1和vis2分别记录最小和最大数组的出现情况,记录最小的情况下,相等从小往大取可以保证每个数字只被遍历一遍,但是相等,最大的情况下,可能会达到O(n2),当时没分析时间复杂度直接写上去结果就TLE了。我们得想一个时间复杂度更低的方法。
对于一个无序数列,我们可以使用sort后lower_Bound()的方法可以极大的减少时间复杂度,毕竟每次使用只有logn的复杂度。
因此对于相等,最大的情况,对于第i个数,我们可以每次比寻找输入数组第i个数小的数中最大的数,同时还要保证之前没有被取到,很高兴,这是一个1-n的数组没有重复,用set可以完美解决。(何大佬nb!)

#include<bits/stdc++.h> 
typedef long long ll;
using namespace std;
const int mod=1e9+7;

int a[(int)2e5+5];
int main()
{
	int t,x;
	cin>>t;
	while(t--)
	{
		int n,last=0;
		set<int> st;
		cin>>n;
		for(int i=1;i<=n;++i)
		scanf("%d",&a[i]),st.insert(i);
		for(int i=1;i<=n;++i)
		{
			if(i>1)
			printf(" ");
			if(a[i]!=a[i-1])
			printf("%d",a[i]),st.erase(a[i]);
			else 
			{
				auto p=st.begin();
				printf("%d",*p);
				st.erase(*p);
			}
		}
		printf("\n");
		for(int i=1;i<=n;++i)
		st.insert(i);
		for(int i=1;i<=n;++i)
		{
			if(i>1)
			printf(" ");
			if(a[i]!=a[i-1])
			printf("%d",a[i]),st.erase(a[i]);
			else 
			{
				auto p=st.lower_bound(a[i]);
				--p;
				printf("%d",*p);
				st.erase(*p);
			}
		}
		printf("\n");
	 } 
}
<!-- * @Author: luoxianbo combatzone@163.com * @Date: 2025-07-12 20:23:28 * @LastEditors: luoxianbo combatzone@163.com * @LastEditTime: 2025-08-03 16:32:25 * @FilePath: \VUE3-PROJECT\vite-project\src\components\tecHigLin\TecHigligInfo.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="parent-div"> <div class="left-cloums-div" v-show="leftShowFlag"> <div class="main-div"> <div> <h2>详细介绍</h2> </div> <div class="main-info-div"> <p> <span class="span-title">id </span> <span class="span-message">{{ tecDetil.id }}</span> </p> <p> <span class="span-title">名称 </span> <span class="span-message">{{ tecDetil.name }}</span> </p> <p> <span class="span-title">模块id </span> <span class="span-message">{{ tecDetil.type }}</span> </p> <p> <span class="span-title">模块名称 </span> <span class="span-message">{{ tecDetil.typeName }}</span> </p> <span class="span-title">内容</span> <div class="message-div" v-html="tecDetil.techigligmessage"></div> <div> <button class="gobackBt" @click="goBack">返回</button> </div> </div> </div> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="listContainer"></div> </div> </div> <div class="right-cloums-div" v-show="!leftShowFlag"> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="listContainer"></div> </div> <div class="small-detil-div">详情页面</div> </div> </div> </template> <script setup> import technologyTypeApi from "../../api/technologyTypeIndex.js"; import "@vueup/vue-quill/dist/vue-quill.snow.css"; import { ref, onMounted } from "vue"; //缓存内容引入 import { useRoute, useRouter } from "vue-router"; //详情接口返回数据承接声明 const tecDetil = ref({ id: "", name: "", type: "", typeName: "", techigligmessage: "", smalltecVOList: [], // 初始化为空数组 }); // 路由信息对象 const route = useRoute(); const router = useRouter(); const leftShowFlag = ref(true); //组件渲染函数 onMounted(() => { //调用详情接口函数 getTecDetil(route.params.id); }); //获取详情接口调用函数 const getTecDetil = (id) => { //情趣详情接口 technologyTypeApi.detail({ id: id }).then((res) => { tecDetil.value = res.data.data; const smallTecList = res.data.data.smalltecVOList || []; console.log(typeof smallTecList); // 1. 获取列表容器 const listContainer = document.getElementById("listContainer"); // 2. 清空现有内容 listContainer.innerHTML = ""; let ulElement = document.createElement("ul"); ulElement.className = "el-class-name"; smallTecList.forEach((item) => { //创建ol标签 let elElement = document.createElement("ol"); elElement.innerText = item.title; elElement.addEventListener("click", () => { getSmallDetil(item.id); }); //将创建的ol标签加到ul标签中 ulElement.appendChild(elElement); }); // 4. 将ul添加到容器 listContainer.appendChild(ulElement); }); }; function getSmallDetil(id) { console.log("调用子项目详情查询接口", id); leftShowFlag.value = false; } //返回函数 const goBack = () => { router.push({ name: "TecHigligListName", }); }; </script> <style scoped lang="scss"> .left-cloums-div { display: flex; //弹性布局 justify-content: center; //水平居中 gap: 10px; //子元素间距 margin: 10px; height: 560px; } .right-cloums-div { display: flex; //弹性布局 justify-content: left; //水平居中 gap: 10px; //子元素间距 margin: 10px; height: 560px; } //子级元素布局 .main-div { flex: 1; height: 100%; } .small-list-div { flex: 0.3; height: 100%; weight: 100px; } p { margin: 10px; } .span-title { background-color: #bed2f0; font-size: 16px; //字号 font-family: Arial, sans-serif; //字体 font-weight: bold; //加粗 border: 1px solid #000; //边框 border-radius: 4px; //圆角 padding: 2px 5px; margin: 5px; } .span-message { background-color: #dde5f1; font-size: 16px; //字号 font-family: Arial, sans-serif; //字体 border: 1px solid #bdb6b6; //边框 border-radius: 4px; //圆角 padding: 2px 5px; } .message-div { background-color: rgb(163, 171, 167); margin: 5px; padding: 3px; height: 300px; width: 100%; overflow-y: auto; //当div的内容过多,则垂直滚动显示 } .small-list-div-div { background-color: #bdb6b6; width: 100%; border: 1px solid #bdb6b6; //边框 border-radius: 4px; //圆角 } .list-div { margin: 4px; width: 100%; height: 400px; } .li-class { background-color: rgb(118, 115, 115); } .gobackBt { width: 50px; height: 30px; background-color: brown; } </style> 分析这段代码,在点击left-cloums-div元素下的ol标签之后,right-cloums-div元素下的list-div列表没有数据,式什么原因,如何解决
08-04
<think>我们分析一下代码: 1. 在模板中,我们有两个主要部分:left-cloums-div 和 right-cloums-div。left-cloums-div 默认显示,right-cloums-div 默认隐藏(通过v-show="!leftShowFlag")。 2. 在left-cloums-div中,有一个small-list-div,里面有一个list-div(id="listContainer"),用于显示子项目清单(即smalltecVOList)。这个列表是通过getTecDetil函数获取数据后动态生成的。 3. 当点击left-cloums-div中的ol标签(即子项目清单中的某一项)时,会触发getSmallDetil函数,该函数将leftShowFlag设置为false,从而隐藏left-cloums-div,显示right-cloums-div。 4. 但是,在right-cloums-div中,也有一个small-list-div,里面同样有一个list-div(id="listContainer")。注意,两个list-div的id都是"listContainer"!这会导致重复的id,而id应该是唯一的。 问题原因: 当我们在left-cloums-div中点击ol标签时,我们只是切换了显示(隐藏左边,显示右边),但是并没有为右边的list-div填充数据。而且,由于两个list-div的id相同,在getTecDetil函数中,我们通过document.getElementById("listContainer")获取元素时,实际上获取的是第一个匹配的元素(即左边列表的容器)。在右边显示时,我们并没有重新为右边的list-div生成列表。 此外,在getTecDetil函数中,我们只对左边的listContainer进行了操作。当切换到右边时,右边的listContainer是空的,因为我们没有为它生成内容。 解决方案: 1. 确保id唯一:为左右两个列表容器设置不同的id,例如左边为"leftListContainer",右边为"rightListContainer"。 2. 在生成子项目列表时,同时为左右两个列表容器生成内容,或者根据当前显示的区域动态选择要操作的容器。但是,由于右边显示时,左边已经隐藏,我们可能希望右边显示时,右边的列表容器显示同样的子项目清单(或者可能是点击的子项目详情,但根据需求,右边显示的是子项目清单和详情,而当前代码中右边只有清单和另一个详情区域,但详情区域没有内容)。 然而,根据需求,我们可能希望: - 左边显示主项目详情和子项目清单。 - 当点击子项目清单中的某一项时,右边显示该子项目的详情(同时右边也显示子项目清单,以便可以选择其他子项目?)。 但是,当前代码中右边的结构是: <div class="right-cloums-div" v-show="!leftShowFlag"> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="listContainer"></div> </div> <div class="small-detil-div">详情页面</div> </div> 我们期望右边显示时,右边的list-div(即子项目清单)也要有数据,而且点击右边的子项目清单时,应该能在右边的详情区域显示详情。 因此,我们需要: - 修改左右两个列表容器的id,使其不同。 - 在getTecDetil函数中,同时为左右两个列表容器生成子项目清单(或者将生成列表的函数独立出来,在需要的时候调用)。 - 另外,当点击左边的子项目时,我们切换到右边,并显示该子项目的详情(但当前代码中,右边的详情区域只是一个简单的div,没有内容)。 但是,考虑到时间,我们先解决列表显示的问题。 步骤: 1. 修改模板,将左右两个列表容器的id分别设置为"leftListContainer"和"rightListContainer"。 2. 在getTecDetil函数中,同时为两个容器生成列表(或者只生成一次,然后复制?)。但是注意,左右两个列表的数据是一样的,都是tecDetil.value.smalltecVOList。 3. 同时,我们也要为右边的列表容器中的每个子项绑定点击事件,点击时应该触发一个函数(比如getSmallDetilForRight)来显示子项目详情在右边的详情区域。 但是,由于左右两个列表结构相同,我们可以写一个函数来生成列表,然后分别调用。 然而,我们注意到:在getTecDetil函数中,我们只获取了主项目的详情,包括子项目列表。这个列表数据在tecDetil.value.smalltecVOList中。 我们可以重构生成列表的代码为一个函数,例如renderSmallTecList(containerId, smallTecList),然后分别在左右两个容器上调用。 修改后的代码: 1. 修改模板中两个列表容器的id: 左边:<div class="list-div" id="leftListContainer"></div> 右边:<div class="list-div" id="rightListContainer"></div> 2. 在getTecDetil函数中,获取到数据后,分别渲染左右两个列表。 3. 为右边的列表项绑定点击事件,点击时在右边的详情区域显示内容(这里我们先实现点击事件,但具体详情显示逻辑需要另外实现)。 但是,注意:右边的列表在初始时是隐藏的,所以当我们在getTecDetil中渲染右边的列表时,它还没有被添加到DOM中?实际上,v-show只是控制显示隐藏,元素始终在DOM中,所以可以直接操作。 4. 另外,在getSmallDetil函数(左边列表的点击事件)中,我们除了隐藏左边显示右边,还应该做什么?可能需要显示点击的子项目的详情。但是当前代码中,右边的详情区域是<div class="small-detil-div">详情页面</div>,我们需要填充内容。 由于需求变得复杂,我们可能需要重新设计: - 左边:显示主项目详情和子项目列表(左边)。 - 右边:当点击左边的子项目时,显示右边布局,右边布局包括子项目列表(和左边一样的)和详情区域。并且,右边显示时,左边的子项目列表隐藏,但右边的子项目列表显示,并且点击右边的子项目列表时,在右边的详情区域显示详情。 这样,左右两边的子项目列表数据相同,但独立操作。 具体修改: 步骤1:修改模板中的id,并调整右边的结构,右边的详情区域应该可以显示具体内容。 步骤2:独立一个函数用于渲染子项目列表到指定容器,并绑定点击事件(点击事件函数根据所在区域不同而不同,左边点击触发切换显示右边并显示详情,右边点击则直接在右边显示详情)。 步骤3:在getTecDetil中,调用两次这个渲染函数,分别渲染左边和右边的容器。 步骤4:为右边的详情区域设置一个引用(比如ref),以便动态填充内容。 但是,由于我们使用的是原生DOM操作,而Vue推荐使用数据驱动,我们可以考虑使用Vue的方式来渲染列表,而不是操作DOM。 考虑到时间,我们暂时不重构成Vue数据驱动的方式,而是继续使用DOM操作,但为了清晰,我们将渲染列表的函数独立出来。 由于代码较长,我们只修改关键部分。 修改后的代码示例: 模板部分修改: left-cloums-div中的list-div: <div class="list-div" id="leftListContainer"></div> right-cloums-div中的list-div: <div class="list-div" id="rightListContainer"></div> 在getTecDetil函数中,修改为: const smallTecList = res.data.data.smalltecVOList || []; renderSmallTecList(&#39;leftListContainer&#39;, smallTecList, &#39;left&#39;); renderSmallTecList(&#39;rightListContainer&#39;, smallTecList, &#39;right&#39;); 然后定义renderSmallTecList函数: function renderSmallTecList(containerId, smallTecList, area) { const listContainer = document.getElementById(containerId); listContainer.innerHTML = ""; let ulElement = document.createElement("ul"); ulElement.className = "el-class-name"; smallTecList.forEach((item) => { let elElement = document.createElement("ol"); elElement.innerText = item.title; // 根据区域绑定不同的事件 if (area === &#39;left&#39;) { elElement.addEventListener("click", () => { getSmallDetil(item.id); // 左边点击事件:隐藏左边,显示右边,并显示该子项目详情 }); } else { // 右边 elElement.addEventListener("click", () => { showSmallDetailInRight(item.id); // 在右边的详情区域显示该子项目详情 }); } ulElement.appendChild(elElement); }); listContainer.appendChild(ulElement); } 同时,我们需要实现showSmallDetailInRight函数,用于在右边的详情区域显示内容。 另外,在getSmallDetil函数中,我们现在只是切换显示,还应该设置当前选中的子项目id,并调用showSmallDetailInRight来显示详情(因为点击左边切换后,右边应该显示该子项目详情)。 所以,修改getSmallDetil: function getSmallDetil(id) { leftShowFlag.value = false; // 同时显示该id对应的子项目详情到右边详情区域 showSmallDetailInRight(id); } 然后,实现showSmallDetailInRight(id)函数,该函数根据id获取子项目详情,然后填充到右边的详情区域(.small-detil-div)。 但是,我们目前没有子项目详情的接口,所以这里我们假设可以调用一个接口,然后填充。 由于原代码中没有这个接口,我们这里先模拟。 步骤: 1. 为右边的详情区域设置一个id,比如id="rightDetailContainer"。 2. 在showSmallDetailInRight函数中,根据id获取数据,然后填充。 修改模板,将右边详情区域改为: <div class="small-detil-div" id="rightDetailContainer">详情页面</div> 然后,在showSmallDetailInRight函数中: function showSmallDetailInRight(id) { // 调用接口获取子项目详情,这里假设有一个接口函数 technologyTypeApi.smallDetail technologyTypeApi.smallDetail({ id: id }).then(res => { const detailData = res.data.data; // 将详情内容填充到rightDetailContainer const container = document.getElementById(&#39;rightDetailContainer&#39;); // 这里可以根据需要构建详情内容,例如: container.innerHTML = ` <h3>${detailData.title}</h3> <div>${detailData.content}</div> `; }); } 注意:由于我们还没有定义smallDetail接口,所以需要根据实际情况添加。 但是,原代码中并没有这个接口,所以我们需要在technologyTypeIndex.js中添加。 由于问题主要在于列表显示,我们假设这个接口存在。 总结: - 修改左右两个列表容器的id,避免重复。 - 独立渲染函数,分别渲染左右列表,并绑定不同的事件(左边点击切换布局并显示详情,右边点击直接显示详情)。 - 在左边点击事件中,除了切换布局,还要触发右边详情的显示。 - 实现右边详情的显示函数。 由于代码量较大,这里只给出关键修改步骤。 但是,如果时间有限,我们也可以简化:只显示一个列表,即右边显示时,左边的列表隐藏,右边的列表使用和左边同样的数据,但是重新渲染一次。这样,我们可以只用一个容器id,但是通过控制显示隐藏来切换。不过,这样还是存在id重复的问题,所以还是要分开id。 因此,我们按照上述步骤修改。 注意:在Vue中,操作DOM不是最佳实践,最佳实践应该是使用v-for来渲染列表,并通过响应式数据来控制。但考虑到原代码已经使用了DOM操作,我们延续这种方式。 修改后的代码示例(只列出修改部分):</think>### 问题分析 在点击左侧列表中的`<ol>`标签后,右侧列表没有显示数据的原因主要有两点: 1. **DOM元素ID冲突**:左右两个列表容器都使用了相同的ID `listContainer`,导致JavaScript操作时总是定位到左侧容器 2. **数据绑定缺失**:右侧列表容器没有绑定子项目数据,点击事件仅切换了显示状态但未加载数据 ### 解决方案 #### 1. 修复ID冲突问题 修改模板,为左右列表容器设置不同的ID: ```html <!-- 左侧列表容器 --> <div class="list-div" id="leftListContainer"></div> <!-- 右侧列表容器 --> <div class="list-div" id="rightListContainer"></div> ``` #### 2. 重构数据渲染逻辑 创建独立的渲染函数,支持同时更新左右列表: ```javascript // 在setup中添加 const rightShowFlag = ref(false); const activeSmallTecId = ref(null); // 创建通用渲染函数 const renderSmallTecList = (containerId, list) => { const container = document.getElementById(containerId); if (!container) return; container.innerHTML = ""; const ul = document.createElement("ul"); ul.className = "el-class-name"; list.forEach(item => { const li = document.createElement("li"); li.className = "li-class"; li.textContent = item.title; li.addEventListener("click", () => { activeSmallTecId.value = item.id; // 左侧点击切换到右侧显示 if (containerId === "leftListContainer") { leftShowFlag.value = false; rightShowFlag.value = true; } // 这里可以添加获取子项详情的逻辑 console.log("加载子项目详情:", item.id); }); ul.appendChild(li); }); container.appendChild(ul); }; // 修改getTecDetil函数 const getTecDetil = (id) => { technologyTypeApi.detail({ id }).then(res => { tecDetil.value = res.data.data; const smallTecList = res.data.data.smalltecVOList || []; // 同时渲染左右列表 renderSmallTecList("leftListContainer", smallTecList); renderSmallTecList("rightListContainer", smallTecList); }); }; ``` #### 3. 修改模板结构 ```html <template> <!-- 左侧区域 --> <div class="left-cloums-div" v-show="leftShowFlag"> <!-- ... 其他代码不变 ... --> <div class="list-div" id="leftListContainer"></div> </div> <!-- 右侧区域 --> <div class="right-cloums-div" v-show="rightShowFlag"> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="rightListContainer"></div> </div> <div class="small-detil-div"> <!-- 子项目详情展示区 --> <div v-if="activeSmallTecId"> 当前查看的子项目ID: {{ activeSmallTecId }} <!-- 实际项目这里加载详情内容 --> </div> </div> </div> </template> ``` #### 4. 添加CSS样式(确保列表项可点击) ```css .li-class { cursor: pointer; padding: 8px; margin: 4px 0; background-color: #f0f0f0; border-radius: 4px; } .li-class:hover { background-color: #e0e0e0; } ``` ### 关键修改说明: 1. **ID唯一化**: - 左侧列表容器ID改为 `leftListContainer` - 右侧列表容器ID改为 `rightListContainer` 2. **响应式状态扩展**: - 新增 `rightShowFlag` 控制右侧区域显示 - 新增 `activeSmallTecId` 记录当前选中的子项目 3. **通用渲染函数**: - 封装 `renderSmallTecList` 方法实现列表复用 - 根据容器ID区分点击行为(左侧点击会切换视图) 4. **事件处理优化**: - 使用 `<li>` 替代 `<ol>` 更符合语义 - 添加悬停效果提升用户体验 - 左侧点击自动切换到右侧视图 ### 最终效果: 1. 左侧列表点击 → 自动切换到右侧视图 2. 右侧显示相同的子项目列表 3. 点击任意列表项会在详情区显示选中状态 4. 两侧列表独立存在,互不影响 ### 后续优化建议: 1. 添加子项目详情加载逻辑 2. 实现列表项选中高亮效果 3. 添加返回左侧视图的按钮 4. 使用Vue组件替代原生DOM操作
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值