Implement Multi-topic switching through JavaScript, and switch between javascript Columns

Implement Multi-topic switching through JavaScript, and switch between javascript Columns

In website development, especially for news websites, you are often faced with the design of switching multiple columns. This effect has many implementation effects. Now we record a very simple method:

<Style>. news_wrap {width: pixel PX; height: 266px; float: left; margin-left: 15px ;}. news_head {width: pixel PX; border-bottom: 2px solid # dedede; height: 51px; line-height: 51px ;}. tabList ul li {float: left; cursor: pointer; font-weight: bold; text-align: center; font-size: 16px; width: 72px ;}. cli1 {color: # 3a7aaf; border-bottom: 2px solid # 3a7aaf ;}. more {font-size: 14px; color: # 9a9a9a; float: right; font-weight: normal; padding-right: 0 ;}. tabCon {width: 376px; padding-top: 13px; overflow: hidden ;} </style> <div class = "news_wrap"> <div class = "news_head"> <div class = "tabList"> <ul> <li class = "cli1" id = "p1" onmouseover = "return swap_tab (1) "> working dynamics </li> <li class =" cli2 "id =" p2 "onmouseover =" return swap_tab (2) "> Media Link </li> <li class =" cli2 "id =" p3 "onmouseover =" return swap_tab (3) "> leadership activities </li> </ul> </div> <div class =" more "> <div id =" j1 "> working dynamics _ more </div> <div id = "j2" style = "display: none; "> Media Link _ more </div> <div id =" j3 "style =" display: none; "> lead activity _ more </div> <div class =" tabCon "> <div id =" n1 "> <li> Work dynamics _ list </li> <li> Work dynamics _ list </li> </div> <div id = "n2" style = "display: none; "> <li> Media Link _ list </li> </div> <div id = "n3" style = "display: none; "> <li> lead activity _ list </li> </div> </div> <script> function swap_tab (n) {// mouse trigger event for (var I = 1; I <4; I ++) {var curC = document. getElementById ("n" + I); var curB = document. getElementById ("p" + I); var mores = document. getElementById ("j" + I); if (n = I) {curC. style. display = "block"; curB. className = "cli1"; mores. style. display = "block";} else {curC. style. display = "none"; curB. className = "cli2"; mores. style. display = "none" ;}}</script>

The above section describes how to implement multi-topic switching using JavaScript. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!