<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/swiper-3.4.2.min.css"> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/index.css"> <title>Tianjin Medical University Cancer Institute & Hospital</title> <style> .single_box { width: 600px; margin-bottom: 44px; } .single_box:last-child { margin: 0; } .content-word { position: relative; } .content-word-left { width: 300px; flex: unset; align-self: flex-start; justify-self: flex-end; margin-left: 60px; } .content-word-right { flex: 1; display: none !important; display: -webkit-flex; flex-wrap: wrap; padding: 0; position: relative; } .content-word-right.active { display: flex !important; } .content-word-right .single_part { width: 243px; display: flex; margin-bottom: 50px; font-size: 17px; color: #040404; flex-flow: column; align-items: flex-start; margin-left: 50px; } .content-word-left h4 { color: #232323; opacity: .7; line-height: 2.5; padding: 0; margin: 0; cursor: pointer; } .single_part p { margin-top: 10px; } .content-word-left { background: #EBFBF8; height: 863px; position: relative; } .part_box { width: 242px; height: 115px; overflow: hidden; background-color: #898989; } .depart_introduce { background: #EBFBF8; overflow: hidden; color: #232323; margin-top: 60px; box-sizing: border-box; padding: 20px; padding-bottom: 50px; width: 100%; } .depart_introduce.auto { height: auto; } .part_top { height: 74px; background: #83AD9F; color: #000000; font-size: 16px; font-weight: bold; text-align: center; line-height: 74px; } .part_inner_content { padding: 20px 40px; } .person_introduce_box { border-top: 5px solid #999; margin-top: 100px; padding-top: 50px; } .person_introduce_box h3 { color: #00A16C; } .next { width: 32px; height: 22px; position: absolute; bottom: -15px; left: 50%; margin-left: -11px; cursor: pointer; } </style> </head> <body> <nav class="navbar navbar-default bgf mb0"> <div class="container-fluid top_pc_brand"> <div class="navbar-header"> <button type="button" class="navbar-toggle mtperc10 menuPage" data-toggle="collapse" data-target="#bs-example-navbar-collapse-4" aria-expanded="true"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand logo" href="../index.html"> <img class="brand-logo" src="../images/logo.png" alt=""> </a> </div> <div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-4" aria-expanded="true"> <div class="search-group mt30 form-group navbar-text navbar-right"> <a href="http://www.tjmuch.com/" class="langue">中文</a> <input type="text" class="form-control search-input" placeholder="Search"> <div class="magnifier"> <img src="../images/01pc-main/pic%20(11).png" alt=""> </div> </div> </div> </div> </nav> <div class="container-fluid pc"> <div class="mask"></div> <div class="bs-example" data-example-id="simple-justified-button-group"> <ul class="nav_menu_items"> <li class="btn navbtn-a" role="button"> <a href="javascript:;">ABOUT US</a> <div class='sec_menu_items'> <a href="../about/welcome.html" class="inner_item"> Welcome Message </a> <a href="../about/mission.html" class="inner_item"> Mission and Vision </a> <a href="../about/leadership.html" class="inner_item"> Leadership </a> <a href="../about/history.html" class="inner_item"> History and Milestones </a> <a href="../about/quick.html" class="inner_item"> Quick Facts </a> <a href="../about/contact.html" class="inner_item">Contact Us</a> </div> </li> <li class="btn navbtn-a" role="button"> <a href="JavaScript:;">CLINICAL RESOURCES</a> <div class='sec_menu_items'> <div href="../clinical/departments.html" onclick="window.location.href='../clinical/departments.html'" class="inner_item"> Clinical Departments <div class="third_menu_items"> <a href="../clinical/departm.html" class="inner_item"> Surgical Department </a> <a href="../clinical/medical.html" class="inner_item"> Medical Oncology </a> <a href="../clinical/radiation.html" class="inner_item"> Radiation Oncology </a> <a href="../clinical/diagnostic.html" class="inner_item"> Diagnostic Oncology </a> <a href="../clinical/center.html" class="inner_item"> Center of Excellences </a> </div> </div> <a href="../clinical/activities.html" class="inner_item"> Clinical Activities </a> <a href="../clinical/trials.html" class="inner_item"> Clinical Trials </a> <a href="../clinical/finddoctor.html" class="inner_item"> Find a Doctor </a> </div> </li> <li class="btn navbtn-a" role="button"> <a href="javascript:;">RESEARCH & EDUCATION</a> <div class='sec_menu_items'> <a href="../research/nationalCancer.html" class="inner_item"> National Cancer Clinical Research Center </a> <div href="../research/research.html" onclick="location.href='../research.html'" class="inner_item"> Research <div class="third_menu_items"> <a href="../research/research1.html" class="inner_item"> Research programs </a> <a href="../research/research2.html" class="inner_item"> Achievements </a> <a href="../research/research3.html" class="inner_item"> Key Labaratories </a> <a href="../research/researcher.html" class="inner_item"> Find a Researcher </a> </div> </div> <div href="../research/education.html" onclick="location.href='../research/education.html'" class="inner_item"> Education <div class="third_menu_items"> <a href="../research/education.html" class="inner_item"> Graduate Study </a> <a href="../research/education.html" class="inner_item"> International Study </a> <a href="../research/education.html" class="inner_item"> Continuing Study </a> </div> </div> <a href="../research/news.html" class="inner_item"> News </a> </div> </li> <li class="btn navbtnActive navbtn-a" role="button"> <a href="javascript:;">TIANJIN CANCER INSTITUTE</a> <div class='sec_menu_items'> <div href="javascript:;" class="inner_item"> About Us <div class="third_menu_items"> <a href="aboutus.html" class="inner_item"> About Us </a> <a href="leadership.html" class="inner_item"> Leadership </a> <a href="history.html" class="inner_item"> History </a> <a href="report.html" class="inner_item"> Annual Report </a> </div> </div> <div href="../clinical/nursing.html" class="inner_item"> Research <div class="third_menu_items"> <a href="researchers.html" class="inner_item"> Our Researchers </a> <a href="facilities.html" class="inner_item"> Core Facilities and Services </a> <a href="http://www.cancerbiomed.org/index.php/cocr" class="inner_item"> Journal of Clinical Oncology </a> </div> </div> <a href="news.html" class="inner_item"> News </a> <a href="concat.html" class="inner_item"> Contact Us </a> </div> </li> <li class="btn navbtn-a" role="button"> <a href="../contact.html">NURSING CARE</a> <div class='sec_menu_items'> <a href="../care/aboutus.html" class="inner_item"> About Us </a> <a href="../care/activity.html" class="inner_item"> Nursing Activities </a> <a href="../care/training.html" class="inner_item"> Nurse Training </a> <a href="../care/achievement.html" class="inner_item"> Research Achievement </a> <a href="../care/exchange.html" class="inner_item"> International Exchanges </a> <a href="../care/cancer.html" class="inner_item"> Cancer Survivorship Support </a> <a href="../care/news.html" class="inner_item"> News & Events </a> <a href="../care/contactUs.html" class="inner_item"> Contact Us </a> </div> </li> <li class="btn navbtn-a" role="button"> <a href="javascript:;">INTERNATIONAL AFFAIRS</a> <div class='sec_menu_items'> <a href="../international/conference.html" class="inner_item"> International Conferences </a> <a href="../international/training.html" class="inner_item"> Oversea Trainings </a> <a href="../international/referral.html" class="inner_item"> International Patients </a> <a href="../international/partners.html" class="inner_item"> Partnership Institutions </a> <!--<a href="../international/exchange.html" class="inner_item">--> <!--International Exchanges News--> <!--</a>--> </div> </li> <li class="btn navbtn-a" role="button"> <a href="../news.html">NEWS RELEASE</a> </li> </ul> </div> <!-- Swiper --> <div class="img-header"> <img src="../images/cli2_top.png" width="100%" alt=""> </div> <div class="content"> <div class="content-word"> <div class="content-word-right active"> <div class="person_desc"> <div class="person_desc_photo"> <img src="../images/xishan.png" alt="" srcset=""> </div> <div class="person_desc_box"> <h4 class="pername"> </h4> <h4 class="pername"> Professor Xishan,<br> Hao Director, Tianjin Cancer Institute </h4> </div> </div> <div class="depart_introduce"> <div class="part_desc"> <p style="font-size: 18px"> Professor Xishan Hao, Academician of Chinese Academy of Engineering; Director of National Clinical Research Center for Cancer; Director of Tianjin Cancer Institute; Member of the 9th National Committee of China Association for Science and Technology; Deputy Director of the Special Committee for International Cooperation and External Liaison of China Association for Science and Technology; Chairman of the Board of Supervisor of CACA;Chairman of The Professional Committee of Clinical Application, China Medicinal Biotech Association; Editor-in-Chief of 《Chinese Journal of Clinical Oncology》 and 《Cancer Biology &Medicine》. Vice President of Serologic International Society (SIS); Honorary President of Tianjin Medical University; Honorary President of Tianjin Medical University Cancer Institute & Hospital, Honorary President of CACA; Professor Xishan Hao is a leading surgical oncologist in China. He devoted himself to the clinical oncology and scientific research of cancer for more than 40 years and made many innovative achievements in surgical oncology, immunotherapy and epidemiology of cancer. </p> </div> </div> </div> <!-- <div class="content-word-left"> <div class="part_top"> DEPARTMENTS DYNAMICS </div> <div class="part_inner_content"> under construction under construction under construction under construction under construction under construction under construction under construction under construction under construction under construction under construction </div> <img src="../images/next.png" class="next" alt="" srcset=""> </div> --> </div> </div> <footer class="footer-content"> <div class="footer-main"> <ul class="list-unstyled third-ul"> <li>West Huan-Hu Rd, Ti Yuan Bei, Hexi District</li> <li>Tianjin 300060</li> <li>China</li> <li>Tel/Fax: 0086-22-23359337</li> <li>Email: info@tjmuch.com</li> </ul> <ul class="list-unstyled first-ul"> <li><img src="../images/yikeda.png" width="160px" alt=""></li> <li><img src="../images/tjuc.png" width="160px" alt=""></li> </ul> </div> </footer> </div> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/swiper-3.4.2.jquery.min.js"></script> <script src="../js/common.js"></script> <script> $(document).ready(function () { $(".btn-group").find(".navbtn-a").click(function () { console.log(this) $(this).siblings('.navbtn-a').removeClass('navbtnActive'); // 删除其他兄弟元素的样式 $(this).addClass('navbtnActive'); // 添加当前元素的样式 }) }) var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true }); var swiper = new Swiper('.swiper-container1', { pagination: '.swiper-pagination', slidesPerView: 3, paginationClickable: true, spaceBetween: 30 }); $('.content-word-left').on('click', 'h4', function () { $(this).addClass('active').siblings().removeClass('active') $('.content-word-right').eq($(this).index()).addClass('active').siblings().removeClass('active') }) // </script> </body> </html>