很多购物网站上,因为要尽可能的展示自己产品的丰富度,经常会看到这种效果:在页面的同一个位置,比如先是衣食住行四个按钮排成一排在上方,'衣'的背景还是亮着的,而按钮下方的内容都是与'衣'相关的.而点击'食'时,不仅本身的背景会变亮,下方原来'衣'的内容也会变成和'食'相关的内容,这种效果可以节省很多空间,给用户提供更多需求的同时也能给页面腾出更多空间,今天就让长沙网站制作来教您如何做出这种效果吧：

HTML与JS代码如上:(来源于:长沙网站建设)

使用HTML和CSS代码搭好框架后,实现这个效果主要还是依靠JS代码来完成,首先定义好函数,声明好变量,主要以'.tl'和'.tr'为核心.然后给'.tl'按钮添加点击事件监听器,当有按钮被按下,按钮自身背景颜色有变化的同时,程序会在所有'.tr'中找到和'.tl'tab值一样的id名后,赋予其新的类名将其显示.同时移除其他'.tr'的类名将其隐藏.

页面效果如下图所示：

以上就是长沙网站建设整理出的按钮切换内容区显示与隐藏的方法,希望能对您有所帮助！

长沙蒲公英网络作为长沙网站建设、长沙网站制作、长沙网站设计、长沙网站开发、长沙做网站等领域的专业公司,将一如既往地为客户提供优质的网站优化服务,为企业的发展保驾护航.