{"id":1003,"date":"2024-02-07T23:39:00","date_gmt":"2024-02-07T15:39:00","guid":{"rendered":"https:\/\/hy68.top\/?p=1003"},"modified":"2024-04-05T23:51:02","modified_gmt":"2024-04-05T15:51:02","slug":"htmlcssjs%e5%88%b6%e4%bd%9c%e5%9b%be%e7%89%87%e5%b9%bb%e7%81%af%e7%89%87%e6%95%88%e6%9e%9c%e4%bb%a3%e7%a0%81%e5%8d%95%e5%87%bb%e6%a0%87%e7%ad%be%e5%88%87%e6%8d%a2","status":"publish","type":"post","link":"https:\/\/hy68.top\/index.php\/2024\/02\/07\/1003\/","title":{"rendered":"html+css+js\u5236\u4f5c\u56fe\u7247\u5e7b\u706f\u7247\u6548\u679c\u4ee3\u7801(\u5355\u51fb\u6807\u7b7e\u5207\u6362)"},"content":{"rendered":"\n

\u4e00\u4e2a\u7b80\u5355\u7684HTML+Css+JavaScript\u4ee3\u7801\u793a\u4f8b\uff0c\u7528\u4e8e\u521b\u5efa\u4e00\u4e2a\u5e7b\u706f\u7247\u5f0f\u7684\u56fe\u7247\u5207\u6362\u6548\u679c\uff1a<\/p>\n\n\n\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>\u591a\u56fe\u7247\u5355\u51fb\u6807\u7b7e\u8fdb\u884c\u5207\u6362\u7684html+css+js\u4ee3\u7801<\/title>\r\n  <style>\r\n    body {\r\n      font-family: \"Lato\", sans-serif;\r\n    }\r\n\r\n    .tablink {\r\n      background-color: #555;\r\n      color: white;\r\n      float: left;\r\n      border: none;\r\n      outline: none;\r\n      cursor: pointer;\r\n      padding: 14px 16px;\r\n      font-size: 17px;\r\n      width: 20%;\r\n    }\r\n\r\n    .tablink:hover {\r\n      width: 20%;\r\n      background-color: #777;\r\n    }\r\n\r\n    \/* Style the tab content *\/\r\n    .tabcontent {\r\n      color: white;\r\n      display: none;\r\n      padding: 8px;\r\n      padding-bottom: 12px;\r\n      text-align: center;\r\n    }\r\n\r\n    .tabcontent img {\r\n      width: 100%;\r\n      height: auto;\r\n    }\r\n\r\n    \r\n    #London {\r\n      background-color:#FF6666;\r\n    }\r\n\r\n    #Paris {\r\n      background-color: green;\r\n    }\r\n\r\n    #Tokyo {\r\n      background-color: blue;\r\n    }\r\n\r\n    #Oslo {\r\n      background-color: orange;\r\n    }\r\n\r\n    #Teal {\r\n      background-color: #109999;\r\n    }\r\n    \r\n  <\/style>\r\n<\/head>\r\n\r\n<body>\r\n  <div id=\"London\" class=\"tabcontent\">\r\n      <img src=\"image1.jpg\" alt=\"Image 1\">\r\n  <\/div>\r\n\r\n  <div id=\"Paris\" class=\"tabcontent\">\r\n    <img src=\"image2.jpg\" alt=\"Image 1\">\r\n  <\/div>\r\n\r\n  <div id=\"Tokyo\" class=\"tabcontent\">\r\n    <img src=\"image3.jpg\" alt=\"Image 1\">\r\n  <\/div>\r\n\r\n  <div id=\"Oslo\" class=\"tabcontent\">\r\n    <img src=\"image4.jpg\" alt=\"Image 1\">\r\n  <\/div>\r\n\r\n  <div id=\"Teal\" class=\"tabcontent\">\r\n    <img src=\"image5.jpg\" alt=\"Image 1\">\r\n  <\/div>\r\n\r\n  <button class=\"tablink\" onclick=\"openCity('London', this, '#FF6666')\" id=\"defaultOpen\">\u8f89\u5b87\u661f\u7a7a<\/button>\r\n  <button class=\"tablink\" onclick=\"openCity('Paris', this, 'green')\">\u7535\u8111\u57ce<\/button>\r\n  <button class=\"tablink\" onclick=\"openCity('Tokyo', this, 'blue')\">\u91d1\u70b9\u5b50<\/button>\r\n  <button class=\"tablink\" onclick=\"openCity('Oslo', this, 'orange')\">\u7535\u8111\u57ce<\/button>\r\n  <button class=\"tablink\" onclick=\"openCity('Teal', this, '#109999')\">\u6c5f\u6e7e\u660e\u73e0<\/button>\r\n\r\n  <script>\r\n    function openCity(cityName, elmnt, color) {\r\n      var i, tabcontent, tablinks;\r\n      tabcontent = document.getElementsByClassName(\"tabcontent\");\r\n      for (i = 0; i < tabcontent.length; i++) {\r\n        tabcontent[i].style.display = \"none\";\r\n      }\r\n      tablinks = document.getElementsByClassName(\"tablink\");\r\n      for (i = 0; i < tablinks.length; i++) {\r\n        tablinks[i].style.backgroundColor = \"\";\r\n      }\r\n      document.getElementById(cityName).style.display = \"block\";\r\n      elmnt.style.backgroundColor = color;\r\n    }\r\n    \/\/ \u89e6\u53d1 id=\"defaultOpen\" click \u4e8b\u4ef6\r\n    document.getElementById(\"defaultOpen\").click();\r\n  <\/script>\r\n<\/body>\r\n\r\n<\/html>\n<\/code><\/pre>\n\n\n\n
\u6ce8\uff1a\u628a\u4ee5\u4e0a\u4ee3\u7801\u5b58\u653e\u5728html\u6587\u4ef6\u4e2d\uff0c\u5e76\u5728\u540c\u76ee\u5f55\u4e2d\u653e\u51655\u5f20\u540d\u4e3aimage1.jpg image2.jpg image3.jpg image4.jpg image5.jpg\u7684\u56fe\u7247\uff0c\u5373\u53ef\u6d4b\u8bd5\u6548\u679c<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
\u4e00\u4e2a\u7b80\u5355\u7684HTML+Css+JavaScript\u4ee3\u7801\u793a\u4f8b\uff0c\u7528\u4e8e\u521b\u5efa\u4e00\u4e2a\u5e7b\u706f\u7247\u5f0f\u7684\u56fe\u7247\u5207\u6362\u6548\u679c\uff1a \u6ce8\uff1a\u628a\u4ee5\u4e0a\u4ee3\u7801…<\/p>\n","protected":false},"author":1,"featured_media":1004,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,6],"tags":[77],"_links":{"self":[{"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/posts\/1003"}],"collection":[{"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":1,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":1005,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions\/1005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/media\/1004"}],"wp:attachment":[{"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hy68.top\/index.php\/wp-json\/wp\/v2\/tags?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}