有网页的源码，怎么在idea里用vue复现，运用element-UI组件，view-source:https://rloopbase.nju.edu.cn/ ，源码如下：
<html xmlns
="http://www.w3.org/1999/xhtml " xml:lang
="en" lang
="en">
<link rel
="stylesheet" type
="text/css" href
="/css/myIndex.css">
<head>
<title>R-loopBase</title>
<link rel
="icon" href
="/images/icon-rloop-purple-circle-2.png" type
="image/x-icon">
</head>
<body>
<div class
="container">
<div class
="indexBar"></div>
<div class
="card"> <!-- Introduction -->
<div class
="cardTitle">
Introduction
</div>
<div class
="cardContext">
<p id
="introductionText" class
="cardP">The R-loop, a three-stranded nucleic acid structure composed of an RNA:DNA hybrid and a displaced single-stranded DNA, plays versatile roles in many physiological and pathological processes. However, its controversial genomic localization and
incomplete understanding of its regulatory network raise great challenges for R-loop research. Here, we present R-loopBase to tackle these pressing issues by systematic integration of a huge amount of genomics and literature data. A reference set of human R-loop zones is computed
with confidence scores and detailed annotations (<span style
="font-weight: bold"><a href
="/index.
jsp">Search</a></span>, <span style
="font-weight: bold"><a href
="/help.
jsp">Help</a></span> and <span style
="font-weight: bold"><a href
="/download.
jsp">Download</a></span>),
all of which can be visualized in well-annotated genomic context in a local genome browser (<span style
="font-weight: bold"><a href
="https://rloopbase.nju.edu.cn/browser/cgi-bin/hgTracks ">Browser</a></span>). A list of 1,185 R-loop regulators is manually curated from PubMed literatures
and annotated with most up-to-date multi-omics data (<span style
="font-weight: bold"><a href
="/rloopRegulator.
jsp">Regulator</a></span></span>).
We have also manually curated 24 R-loop regulators in mouse, 63 in yeast (<i>saccharomyces cerevisiae</i>) and 21 in <i>Escherichia coli</i> to facilicate R-loop research in these model organisms (<span style
="font-weight: bold"><a href
="/rloopRegulator.
jsp">Regulator</a></span>).
We further deduce the functional relationship between individual R-loops and their putative regulators
(<span style
="font-weight: bold"><a href
="/rloopRegulator.
jsp">Regulator</a></span> and <span style
="font-weight: bold"><a href
="/download.
jsp">Download</a></span>). In total, we have generated billions of entries of functional annotations, which can be easily accessed in our
user-friendly interfaces (<span style
="font-weight: bold"><a href
="/help.
jsp">Help</a></span>).
The regulator summary and genomic annotation of R-loop regions will be constantly updated along the research progress of field. You are welcome to contribute to updating R-loop regulators and related literatures (Regulator Updating System on <span style
="font-weight: bold"><a href
="/rloopRegulator.
jsp">Regulator</a></span> page).
Any suggestions and feedbacks from you are also welcome
(<span style
="font-weight: bold"><a href
="/contact.
jsp">Contact</a></span>).
</p>
</div>
<a href
="##"><div id
="showIntroduction" onclick
="showMoreOrLess()" style
="text-decoration: underline; text-align: right; padding-right: 20px; margin-top: -15px;">Show more</div></a>
<hr class
="cardHr">
</div> <!-- Introduction -->
<div class
="searchContainer">
<div class
="searchLogo">
<ul>
<li class
="searchLogoText">R-loopBase</li>
<li class
="searchLogoImg"><img src
="/images/icon-rloop-purple-circle-2.png" style
="height: 60px;"></li>
</ul>
</div>
<div class
="searchForm">
<input id
="searchText" type
="text" name
="" placeholder
="e.g. BRCA2 or chr1:154572702-154628593" onkeypress
="handle(event)">
<a href
="#"><div class
="searchItem" href
="#" onclick
="toGeneList()">
<i>search</i>
</div></a>
</div>
</div>
<div class
="horizontalMenu"> <!-- horizontal menu -->
<ul id
="indexNavigator">
<li>
<a href
="/browser/cgi-bin/hgTracks">
<img src
="/images/browser.png">
<div>Browser</div>
</a>
</li>
<li>
<a href
="/rloopRegulator.
jsp">
<img src
="/images/regulator.png">
<div>Regulator</div>
</a>
</li>
<li>
<a href
="https://rloopbase.nju.edu.cn/deepr/tool/model ">
<img src
="/images/tool.png">
<div>Tool</div>
</a>
</li>
<li>
<a href
="/download.
jsp">
<img src
="/images/download.png">
<div>Download</div>
</a>
</li>
<li>
<a href
="/help.
jsp">
<img src
="/images/help.png">
<div>Help</div>
</a>
</li>
<li>
<a href
="/contact.
jsp">
<img src
="/images/contact.png">
<div>Contact</div>
</a>
</li>
</ul>
</div> <!-- horizontal menu -->
<div class
="twoCardContainer">
<div class
="card cardLeft"><!-- News -->
<div class
="cardTitle">
News
</div>
<div class
="cardContext" id
="newsDiv" style
="overflow:hidden;clear:both;height:220px">
<ul>
<li>2023.10.01 Online of <a href
='https://rloopbase.nju.edu.cn/deepr/tool/model '>DeepER</a>, an R-loop prediction tool.</li>
<li>2022.02.19 A new <a href
="https://doi.org/10.1101/2022.02.18.480986 ">preprint</a> by R-loopBase team.</li>
<li>2021.11.18 Published on <a href
="https://doi.org/10.1093/nar/gkab1103 ">Nucleic Acids Res</a>.</li>
<li>2021.06.20 Official release of R-loopBase v1.0.</li>
<li>2021.06.15 Internal evaluation before public release.</li>
<li>2021.05.10 Build-up of R-loopBase genome browser.</li>
<li>2021.03.31 Data freeze for R-loopBase v1.0.</li>
<li>2021.01.18 Launching R-loopBase project.</li>
<li>2020.10.10 Systematic evalation of all R-loop mapping technologies.</li>
</ul>
</div>
<a href
="##"><div id
="showNews" onclick
="showMoreOrLess2()" style
="text-decoration: underline; text-align: right; padding-right: 20px; margin-top: 4px;">Show more</div></a>
<hr class
="cardHr">
</div><!-- News -->
<div class
="card cardRight"> <!-- Publication -->
<div class
="cardTitle">
Latest Publications
</div>
<div class
="cardContext" id
="publicationDiv">
<ul>
<li><a style
="color: black" href
="https://pubmed.ncbi.nlm.nih.gov/38590928/ ">LUC7L3 is a downstream factor of SRSF1 and prevents genomic instability.</a> Cell Insight. 2024.</li>
<li><a style
="color: black" href
="https://pubmed.ncbi.nlm.nih.gov/38677845/ ">Smartphone-based device for rapid and single-step detection of piRNA-651 using anti-DNA:RNA hybrid antibody and enzymatic signal amplification.</a> Anal Chim Acta. 2024.</li>
<li><a style
="color: black" href
="https://pubmed.ncbi.nlm.nih.gov/38609257/ ">Split activator of CRISPR/Cas12a for direct and sensitive detection of microRNA.</a> Anal Chim Acta. 2024.</li>
</ul>
<div style
="width: 100%; text-align: right; margin-top: -4px;"><a href
="https://pubmed.ncbi.nlm.nih.gov/?term
=%28R-loop%29+OR+%28R-loops%29+OR+%28%22RNA+DNA+hybrid%22%29+OR+%28%22RNA+DNA+hybrids%22%29+OR+%28%22DNA+RNA+hybrid%22%29+OR+%28%22DNA+RNA+hybrids%22%29&sort
=pubdate ">More publications in PubMed</a></div>
</div>
<hr class
="cardHr">
</div> <!-- Publication -->
</div>
<div class
="footer">
<div style
="background-color: rgb(90,19,92); height: 60px; line-height: 60px; text-align: center; color: white; ">
<div style
="display: inline-block; height: 20px; line-height: 20px; margin-top: 15px; margin-bottom: 4px;">© 2020-2025 NANJING UNIVERSITY. ALL RIGHTS RESERVED. </div>
<div style
="height: 20px; line-height: 20px; margin-top: 0px;">CONDITIONS OF USE</div>
</div>
</div>
</div> <!-- container -->
</body>
</html>
<script type
="text/javascript" language
="JavaScript">
function handle(e){
if(e.keyCode
=== 13){
e.preventDefault(); // Ensure it is only this code that runs
toGeneList();
}
}
function toGeneList(){
//var type
= document.getElementById('searchSelect').value;
var type;
var value
= document.getElementById('searchText').value;
if(value
==''){
alert("Please input keyword!");
}else if(value.match(/[^a-zA-Z0-9:-]/)){
alert("Only numbers, letters, \":\" and \"-\" are allowed!");
}else{
//top.location
= '/geneList.
jsp?searchFor
=' + type + '&keyword
=' + value;
if(value.match(/^chr.+:\d+-\d+$/)){
type
="location";
}else{
type
="symbols";
}
top.location
= '/rloopList.
jsp?searchFor
=' + type + '&keyword
=' + value;
}
}
function changeLiSize(){
var selectId
= document.getElementById("myNavigator");
}
function showMoreOrLess(){
var selectId
= document.getElementById("showIntroduction");
var selectText
= document.getElementById("introductionText");
if(selectId.innerText
== "Show more"){
selectText.style.height
="auto";
selectId.innerText
="Show less";
}else{
selectText.style.height
="120px";
selectId.innerText
="Show more";
}
}
function showMoreOrLess2(){
var selectId2
= document.getElementById("showNews");
var selectText2
= document.getElementById("newsDiv");
if(selectId2.innerText
== "Show more"){
selectText2.style.height
="auto";
selectId2.innerText
="Show less";
}else{
selectText2.style.height
="220px";
selectId2.innerText
="Show more";
}
}
var publicationDivHeight
= document.getElementById('publicationDiv').clientHeight;
</script>
本文详细介绍了如何在页面跳转后，实现iframe元素在不同页面间的跳转与加载，通过实例展示了如何在index.jsp页面中跳转到manage/menu.jsp菜单页及基于data.json的数据展示页。
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
