Javascript 单击按钮时查看div

正如您在本网站的投资组合部分所看到的，单击按钮时会出现不同的div。主容器的尺寸也相应地增大或减小。我想需要JS/Jquery。请帮助我刚接触网络开发的朋友们，我被困在这里

.wrap{
最大宽度：1150px；
左边距：自动；
右边距：自动；
}
#波尔通{
文本对齐：居中；
边缘顶部：80px；
}
波特二号{
字体大小：34px；
颜色：#22222；
字体系列：“蒙特塞拉特”，无衬线；
字号：700；
字母间距：-1px；
文本转换：大写；
}
#三号门{
字体大小：16px；
颜色：#888888；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
线高：2.1；
}
/*按钮从这里开始*/
#挑选{
宽度：660px；
高度：45px；
左边距：自动；
右边距：自动；
边缘顶端：40px；
}
buttonz先生{
左边距：9px；
填充：10px 22px；
字体大小：12px；
字体大小：正常；
线高：20px；
颜色：#22222；
边界半径：4px；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
背景色：#f7f7f7；
边框：1px实心#f7f7f7；
光标：指针；
}
.按钮NZ:悬停{
背景色：#7cc576；
边框颜色：#7cc576；
颜色：#fff；
过渡：缓解0.5s；
}
/*按钮到此结束*/
#投资组合{
边缘顶部：50px；
}
.项目{
左边距：16像素；
边缘底部：90像素；
}

文件夹
全新的投资组合设计，让你更想要你。

JS/JQ不是必需的。看看这个。您可以更改属于列表的属性

all、

web

、

app

、

brand

<div class="item" all brand web>1</div>

全部
网页设计
应用程序开发
品牌创建

1.
2.
3.
4.
5.
6.
7.
8

“我想需要JS/Jquery”-是的，它会…那么你的呢？希望您至少尝试自己编写此代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请带着您的代码回来，并解释您尝试了什么以及为什么它不起作用。