Примеры в этой статье делятся эффектом переключения вкладок JS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> вкладка </title> <style> *{margin: 0; Заполнение: 0; Список стиля: none;} .box {width: 1000px; переполнение: скрыто; Полевая: 100px Auto 0px; } #title {line-hight: 40px; фоновый цвет: RGB (247 247 247); размер шрифта: 16px; шрифт-вес: жирный шрифт; Цвет: RGB (102,102,102); переполнение: скрыто; } #title span {float: left; Ширина: 166px; Текст-альбом: Центр; } #title span: hover { /*color: black;* / cursor: pointer; } #content {margin-top: 20px; } #content li {width: 1050px; переполнение: скрыто; дисплей: нет; фоновый цвет: RGB (247 247 247); } #content li div {width: 156px; Право маржи: 14px; Плавание: осталось; Текст-альбом: Центр; } #content li div a {font-size: 14px; Цвет: черный; высота линии: 14px; /* float: слева;*/ дисплей: inline-block; маржинальная версия: 10px; } #content li a: Hover {color: #b70606; } #content li div span {font-size: 16px; высота линии: 16px; /*float: left;*/ display: block; Цвет: RGB (102,102,102); маржинальная версия: 10px; } #content img {float: left; Ширина: 155px; Высота: 250px; } #title. Select {фоновый цвет: rgb (10,167,112); Цвет: белый; } #content .show {display: block; } </style> </head> <body> <div> <p id = "title"> <pan> красивый </span> <pan> красота </span> <pran> pet </span> <pan> </span> <pan> League of Legend href = "#"> Джейсон Стэтхэм </a> <pan> Редкий и крутой </span> </div> <div> <img src = "Images/shuaige2.jpg"> <a href = "#"> Jason Statham </a> <pan> rar и cool </span> </div> <div> <img src = " href = "#"> Tom Cruise </a> <pan> высококачественный, атмосферный и высококачественный </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"> Том Круз </a> <pran>, атмосфер и высококачественный </span> </div> src = "Images/shuaige4.jpg"> <a href = "#"> Том Круз </a> <pan> Высококачественный, атмосферный и высококачественный </span> </div> <Div> <img src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> atmpry-and ampry and atmporm, amporic and amporic and amporic and ampry and at and amporic and at and at and at and at and at and amporic and ampg Высококачественный </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <pan> высококачественный, атмосферный и высокий </span> </div> <Div> <img src = "Images/shuaige4.jpg" Круиз </a> <pan> высококачественный, атмосферный и высококачественный </span> </div> <div> <img src = "Images/shuaige5.jpg"> <a href = "#"> huan fu </a> <pan> низкокачественный роскошь имеет сознание </span> </div> <div> <img src = "shuaige emoury. href = "#"> juan fu </a> <pan> с низкой роскошью имеет коннотацию </span> </div> </li> <li> <div> <img src = "Images/meinv1.jpg"> <a href = "#"> красота </a> <pan> Внешнее и мягкое внутри </span> </div> src="images/meinv2.jpg"><a href="#">Beauty</a><span>Furious outside and soft inside</span></div> <div><img src="images/meinv3.jpg"><a href="#">Beauty</a><span>Cute pouting scissors</span></div> <div><img src = "Images/meinv4.jpg"> <a href = "#"> красота </a> <pan> Симпатичные ножницы надувания </span> </div> <div> <img src = "Images/meinv5.jpg"> <a href = "#"> красота </a> <pran> модная, яркая, свежий </span> </div> <div> <div> <div> <div> <div> <m Div> <m Div> <mref> <mref> <div> <mref = "#" src = "Images/meinv6.jpg"> <a href = "#"> красота </a> <pan> модный, яркий, свежий </span> </div> </li> <li> <viv> <img src = "изображения/chongwu1.jpg"> <a href = "#"> pets </a> <pran> 66 yuan </href = "#"> pets </a> <pran> 66 66 yu <div> <img src = "Images/chongwu2.jpeg"> <a href = "#"> pets </a> <pan> 666 yuan per </span> </div> <div> <img src = "Images/Chongwu3.jpg"> <a href = "#"> pets </a> <pran> 66 66 yuan </span> 666 yu <div> <img src = "Images/chongwu4.jpg"> <a href = "#"> pets </a> <pan> 666 yuan per </span> </div> <div> <img src = "Изображения/чонгву55.jpg"> <a href = "#"> pets </a> <pran> 666. src = "Images/chongwu6.jpg"> <a href = "#"> pets </a> <pan> 666 штук за </span> </div> </li> <li> <div> <img src = "Images/yingshi1.jpg"> <a href = "#"> harry potter erest <div> <img src = "Images/yingshi2.jpg"> <a href = "#"> классика в классике </span> </div> <div> <img src = "Images/yingshi2.jpg"> <a href = "#"> Три дурака делают сует src="images/yingshi3.jpg"><a href="#">Transformers Series</a><span>Exciting and Exciting</span></div> <div><img src="images/yingshi4.jpg"><a href="#">Shengyu Chihiro</a><span>The little loli in the dream is so fresh</span></div> <div> <img src = "Images/yingshi5.jpeg"> <a href = "#"> tongchi </a> <pan> my chinchilla </span> </div> <div> <img src = "Images/yingshi6.jpg"> <a href = "#"> forrest gump </a> <span> для Gump </a> </div> </li> <li> <div> <img src = "Images/lol1.jpg"> <a href = "#"> Ice Sagittarius </a> <pan> </span> </div> <div> <img src = "Images/lol2.jpg"> <a href = "#"#"> дочери. src = "Images/lol3.jpg"> <a href = "#"> explorer </a> <pan> Я самый красивый в игре </span> </div> <div> <img src = "Images/lol4.jpg"> <a href = "#"> hafs </a> <pan> torno </a> <pran> turkish all-rounder </a> <pran> </a> <pran> <span> tur <Div> <img src = "Images/lol5.jpg"> <a href = "#"> Турецкий миллион </a> <pran> смерти миллион миллионов раз в день. Полем </span> </div> <div> <img src = "Images/lol6.jpg"> <a href = "#"> wewolves </a> <pan> Не увеличивайте его для меня </span> </div> </li> <li>. Полем Полем </li> </ul> </div> <script> var title = document.getElementbyId ('title'); var content = document.getElementbyId ('content'); var spans = title.getElementsbytagname ('span'); var lis = content.getElementsbytagname ('li'); for (var i = 0; i <spans.length; i ++) {Spans [i] .index = i; Spans [i] .onclick = function () {for (var j = 0; j <spans.length; j ++) {spans [j] .classname = '' '; lis [j] .classname = ''; } this.classname = 'select'; lis [this.index] .classname = 'show'; }} </script> </body> </html>Ключ к этому коду - последние два для проходов и этого указателя. Первым для прохождения является добавление события Click для каждой кнопки SPAN, в то время как вторая для Traversal - определить, какая кнопка нажимается в настоящее время. Соответствующую часть контента легко контролировать внешний вид и скрытую;
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.