我有一个菜单页面，其中包含href形式的链接。我知道它有一个目标空白，可以在另一个选项卡中将其打开，但是有什么方法可以使每当用户选择一个链接时，该链接将在同一页面中打开，并且菜单窗体将转换为顶部的简单菜单栏？我是这个领域的新手，仍在尝试学习。这可能吗？请帮助
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<title>DOE Dynamic Dashboard</title>
<link rel = "icon" href = "http://www.iconhot.com/icon/png/free-arrow/256/pie-chart-4.png" type = "image/x-icon">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
@media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
@media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
@keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
a {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
a:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
</style>
<script>
var Expand = (function() {
var tile = $('.strips__strip');
var tileLink = $('.strips__strip > .strip__content');
var tileText = tileLink.find('.strip__inner-text');
var stripClose = $('.strip__close');
var expanded = false;
var open = function() {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('strips__strip--expanded');
// add delay to inner text
tileText.css('transition', 'all .5s .3s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('strip__close--show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = true;
}
};
var close = function() {
if (expanded) {
tile.removeClass('strips__strip--expanded');
// remove delay from inner text
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('strip__close--show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)')
expanded = false;
}
}
var bindActions = function() {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Expand.init();
</script>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">ONE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">TWO</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">THREE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">FOUR</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" target="_blank" class="strip__title">FIVE</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>
答案 0 :(得分：1)
这可能不是OP最初想要的，但是在下面您可以通过使用容器找到我的2美分。与其让锚完全重定向用户，我不将信息隐藏在他身上，除非他单击“链接”（同时隐藏其他用户）。
OP将其标记为JavaScript，但我看到使用了Jquery，因此答案包含Jquery。
我很抱歉对细节不重视。我在上班，确实是匆忙创建的。
//Attach a click event for each of the elements that would act as a link
$("li").each(function(index,el){
el.onclick = function() {
//Upon clicking one of the elements, check ALL the elements once again.
//If the elements are not the one that have been clicked, hide it, otherwise expand it.
$("li").each((indexSec,elSec)=>{
if (el !== elSec) {
elSec.style.height = "0"
} else {
el.style.height = "200px"
}
});
}
})body {
background: white;
}
ul {
display: block;
top:0;
left:0;
width:100vw;
box-sizing: border-box;
padding:0;
margin:0;
position: absolute;
height:75px;
list-style-type: none
}
ul li {
width:100%;
height:50px;
border-bottom: 2px solid black;
transition:.1s;
overflow:hidden;
}
ul li p {
box-sizing: border-box;
margin:0;
position:relative;
height:50px;
text-align:center;
width:100%;
line-height: 50px;
}
ul li:hover {
background: grey;
cursor:pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUl">
<li>
<p class="li-title">One</p>
<p class="li-content">One - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt.</p>
</li>
<li>
<p class="li-title">Two</p>
<p class="li-content">Two - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Three</p>
<p class="li-content">Three - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Four</p>
<p class="li-content">Four - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
<li>
<p class="li-title">Five</p>
<p class="li-content">Five - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id congue risus. Morbi imperdiet posuere justo, eget lacinia nulla iaculis ut. In vitae odio bibendum, ornare mauris sit amet, egestas purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fermentum porta massa, ultrices consectetur nibh molestie vitae. Nulla facilisi. Nulla ullamcorper lectus at vehicula tincidunt</p>
</li>
</ul>
答案 1 :(得分：0)
要实现此目的，并从同一页面的菜单栏中打开链接而不是新页面，则需要从导航链接中删除target="_blank"。
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<a href="#" class="strip__title">ONE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" class="strip__title">TWO</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" class="strip__title">THREE</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" class="strip__title">FOUR</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<a href="#" class="strip__title">FIVE</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
在同一页面上打开导航链接时，需要将导航条形码添加到要单击的网页上。这将确保导航栏变回其原始状态。
例如-如果要单击名为test.html的网页，则首先需要将锚链接中的href更新为href="test.html"。此后，您将创建一个名为test.html的新文件，并将导航条形码也添加到该页面。