怎么实现 TI 官网这种点击后，右侧出现相应的内容的效果。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1430 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://www.ti.com/solution/dish-washer

例如该网址中，点击“Reference designs & products”中左侧的框图，在右侧出现了更多详细的内容。

这种有什么工具可以实现吗？

有没有大佬解答下

框图

Designs

点击

reference

2 条回复 • 2020-12-11 09:07:58 +08:00

Vegetable

2020-12-10 18:14:42 +08:00

看了一下这应该是他们自己做的组件，点击左边组件获取数据在右边渲染详细信息。
这页面保留了 sourcemap，感兴趣可以看看
/**
* End Equipment Reference Designs (EERD) API
* Team: Product and Systems Path Virtual Team
* Date: 06/2019
* Version: 1.2
* Latest:
* Products and reference designs items are now side-by-side instead of tabbed view
* EERD width now spans 1920px max
*/

至于左边的图，更有意思了。



这个 svg 是 visio 导出的，也不知道里边的详情链接是怎么绑定进去的。

kevinfk2

2020-12-11 09:07:58 +08:00

@Vegetable 虽然没怎么听懂，但是很感谢大佬的解答。