a标签跳转

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title></title>

<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>

<link rel="stylesheet" href="../css/base.css">

</head>

<body>

<div class="login">

<div class="login-wrap">

<p class="login-left">010-114/116114电话预约</p>

<p class="login-right">欢迎来到城市预约挂号统一平台  请  

<a href="">登录</a>

<a href="">注册</a>

<a href="" class="help">帮助中心</a>

</p>

</div>

</div>

<header>

<div class="header-logo"></div>

<div class="header-reserch">

<div class="header-reserch-select">医院</div>

<div class="header-reserch-list">

<a href="#">疾病</a>

<a href="#">科室</a>

<a href="#">医院</a>

</div>

<input type="text" class="header-reserch-input" placeholder="请输入搜索内容">

<button class="header-reserch-submit">按钮</button>

</div>

</header>

<nav>

<div class="wrap">

<a href="">首页</a>

<a href="">按医院挂号</a>

<a href="">按科室挂号</a>

<a href="">按疾病挂号</a>

<a href="">最新公告</a>

<a href="" class="right">社会知名医院</a>

</div>

</nav>

<div class="intro">

<div class="intro-title">

<div class="intro-title-left">北京协和医院  <span>关注医院</span></div>

<div class="intro-title-right">

<span>等级：</span>三级甲等  

<span>区域：</span>东城区  

<span>分类：</span>中国医科院所属医院

</div>

</div>

<div class="intro-wrap">

<img class="hospital" src="../img/hospital-1.jpg" alt="医院图片">

<div class="intro-content">

</div>

<img class="map" src="../img/map-1.png" alt="地图">

</div>

</div>

<div class="system">

<div class="system-menu">

<div class="system-menu-item item-select">预约挂号</div>

<div class="system-menu-item">医院介绍</div>

<div class="system-menu-item">预约须知</div>

<div class="system-menu-item">停诊信息</div>

<div class="system-menu-item">查询取消</div>

</div>

<div class="system-block">

<div class="system-block-item">

<div class="item1-left">

<p class="item1-left-title">开放预约科室</p>

<div class="item1-left-menu">

<div class="item1-left-menu-caption">2301</div>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

</div>

<div class="item1-left-menu">

<div class="item1-left-menu-caption">专科</div>

<a href="index2.html" target="_self">多发性硬化专科</a>

<a href="index2.html" target="_self">多发性硬化专科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

</div>

<div class="item1-left-menu">

<div class="item1-left-menu-caption">内科</div>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

</div>

<div class="item1-left-menu">

<div class="item1-left-menu-caption">内科</div>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">肿瘤内科门诊</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">特需血液内科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

<a href="index2.html" target="_self">门诊麻醉科</a>

<a href="index2.html" target="_self">特殊门诊科</a>

</div>

</div>

<div class="system-block-item">

<div class="item5-content">

<div class="wrap">

<p>预约识别码：</p>

<input type="text">

<button>查询订单</button>

</div>

</div>

</div>

</div>

</div>

<footer>

<p>Copyright  ©  2017慕课网版权所有</p>

</footer>

<script src="../js/plat.js"></script>

</body>

</html>

*{

padding:0;

margin:0;

border:0;

}

p{

padding: 0;

margin: 0;

}

/* 顶部 */

.login{

width: 100%;

height: 30px;

background-color: #f5f5f5;

}

.login-wrap{

width: 1000px;

height: 30px;

margin: 0 auto;

}

.login-left{

float: left;

font-size: 12px;

color: #868686;

line-height: 30px;

padding-left: 20px;

background: url('http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png') no-repeat center left;

}

.login-right{

float: right;

font-size: 13px;

color: #555;

line-height: 30px;

}

.login-right a{

text-decoration: none;

color: #2da5e1;

margin-left: 10px;

}

.login-right .help{

margin-left: 20px;

}

/* 头部 */

header{

width: 1000px;

height: 92px;

margin: 0 auto;

position: relative;

}

.header-logo{

width: 402px;

height: 74px;

background: url('http://img1.sycdn.imooc.com/climg//58c61b2f0001f5c008400172.png') no-repeat;

background-size: cover;

position: absolute;

top: 50%;

margin-top: -37px;

}

.header-reserch{

width: 326px;

height: 38px;

background: url('http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg') no-repeat;

position: absolute;

top: 29px;

right: 0;

}

.header-reserch-select{

color: #fff;

font-size: 13px;

text-indent: 12px;

line-height: 38px;

cursor: pointer;

}

.header-reserch-list{

width: 65px;

height: 90px;

position: absolute;

top: 38px;

right: 259px;

box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);

display: none;

}

.header-reserch-list a{

width: 65px;

height: 30px;

display: inline-block;

text-decoration: none;

color: #868686;

font-size: 14px;

text-align: center;

line-height: 30px;

background: #fff;

z-index: 9;

}

.header-reserch a:hover{

background-color: #ebeef5;

}

.header-reserch input{

margin-left: 22px;

width: 205px;

height: 30px;

outline: none;

font-size: 12px;

position: absolute;

top: 4px;

left: 53px;

}

.header-reserch button{

width: 40px;

height: 40px;

position: absolute;

top: 0;

right: 0;

opacity: 0;

cursor: pointer;

}

/* 导航栏 */

nav{

width: 100%;

height: 50px;

background-color: #60bff2;

}

nav .wrap{

width: 1000px;

height: 50px;

margin: 0 auto;

}

nav a{

display: inline-block;

margin-left: 50px;

font-size: 18px;

color: #fff;

text-decoration: none;

line-height: 50px;

}

nav a:hover{

background-color: #87CEEB;

}

nav .right{

float: right;

}

/* 简介 */

.intro{

width: 1000px;

height: 260px;

margin: 30px auto 40px auto;

background-color: #f7f7f7;

}

.intro-title{

width: 950px;

height: 52px;

margin: 0 auto;

border-bottom: 1px solid #dcdddd;

}

.intro-title-left{

float: left;

font-size: 16px;

color: #000;

line-height: 52px;

}

.intro-title-left span{

font-size: 12px;

color: #f29600;

}

.intro-title-right{

float: right;

font-size: 12px;

line-height: 52px;

}

.intro-title-right span{

color: #00f;

}

.intro-wrap{

width: 950px;

height: 190px;

margin: 12px auto 0 auto;

}

.intro-wrap .hospital{

float: left;

width: 200px;

height: 150px;

}

.intro-wrap .map{

float: right;

width: 250px;

height: 165px;

}

.intro-content{

width: 460px;

height: 190px;

float: left;

margin: 0 10px 0 20px;

}

.intro-content p{

font-size: 12px;

color: #888;

margin: 9px 0;

line-height: 20px;

padding-left: 30px;

}

.intro-content p:nth-of-type(1){

background: url('../img/icon-web.png') no-repeat;

background-position-x: 0;

background-position-y: 0;

}

.intro-content p:nth-of-type(2){

background: url('../img/icon-web.png') no-repeat;

background-position-x: 0;

background-position-y: -20px;

}

.intro-content p:nth-of-type(3){

background: url('../img/icon-web.png') no-repeat;

background-position-x: 0;

background-position-y: -40px;

}

.intro-content p:nth-of-type(4){

background: url('../img/icon-web.png') no-repeat;

background-position-x: 0;

background-position-y: -60px;

}

/* 预约系统 */

.system{

width: 1000px;

/* height: 460px; */

margin: 0 auto 300px auto;

font-weight: bold;

}

.system-menu{

width: 1000px;

height: 32px;

border-bottom: 2px solid #60bff2;

margin-bottom: 20px;

font-size: 14px;

color: #60bff2;

}

.system-menu-item{

width: 110px;

height: 32px;

float: left;

line-height: 32px;

text-align: center;

cursor: pointer;

}

.item-select{

background-color: #60bff2;

color: #fff;

}

.system-block{

width: 1000px;

/* height: 410px; */

}

.system-block-item{

width: 1000px;

height: 410px;

display: none;

}

.system-block div:nth-of-type(1){

display: block;

}

.item1-left{

width: 706px;

height: 408px;

border-left: 1px solid #f4f6fa;

border-right: 1px solid #f4f6fa;

float: left;

}

.item1-left-title{

width: 706px;

height: 43px;

text-indent: 29px;

font-size: 14px;

color: #000;

line-height: 43px;

background-color: #f4f6fa;

}

.item1-left-menu{

width: 706px;

height: 90px;

border-bottom: 1px solid #f4f6fa;

}

.item1-left-menu-caption{

width: 144px;

height: 90px;

color: #888;

background-color: #f2fbff;

font-size: 14px;

line-height: 30px;

text-align: center;

float: left;

}

.item1-left-menu a{

display: inline-block;

cursor: pointer;

width: 130px;

height: 30px;

color: #4c4948;

font-size: 14px;

line-height: 30px;

text-indent: 20px;

}

.item1-right{

width: 272px;

height: 282px;

border: 1px solid #f4f6fa;

float: right;

}

.item1-right-title{

width: 272px;

height: 40px;

font-size: 14px;

color: #606060;

text-indent: 10px;

line-height: 40px;

background-color: #f4f6fa;

}

.item1-right-title span{

font-size: 12px;

color: #00b3ea;

}

.item1-right-content{

width: 272px;

height: 242px;

font-size: 12px;

color: #555;

overflow-y: scroll;

}

/* .item1-right-content div::after{

content: " ";

display: block;

clear: both;

zoom: 1;

} */

.item1-right-content p{

line-height: 23px;

text-indent: 10px;

width: 70px;

float: left;

}

.item1-right-content span{

color: #888;

width: 170px;

float: left;

line-height: 23px;

}

.item2-content{

margin: 10px 0;

line-height: 30px;

font-size: 14px;

text-indent: 28px;

}

.item3-content{

font-size: 12px;

font-weight: bolder;

margin: 20px 0;

line-height: 15px;

}

.item3-content span{

font-weight: normal;

}

.system-block-item h3{

text-align: center;

margin: 30px 0;

}

.item4-content{

width: 1000px;

height: 500px;

text-align: center;

font-size: 13px;

color: #555;

line-height: 30px;

border: 1px solid #888;

border-collapse:collapse;

}

.item4-content tr,.item4-content td{

border: 1px solid #888;

}

.item5-content{

width: 1000px;

height: 200px;

border-top: 2px solid #f4f6fa;

border-bottom: 2px solid #f4f6fa;

margin: 100px auto;

position: relative;

}

.item5-content .wrap{

width: 400px;

height: 30px;

position: absolute;

top: 50%;

margin-top: -15px;

left: 50%;

margin-left: -200px;

}

.item5-content p{

font-size: 14px;

display: inline-block;

}

.item5-content input{

width: 200px;

height: 26px;

border: 2px solid #f4f6fa;

}

.item5-content button{

width: 100px;

height: 30px;

color: #fff;

background-color: #60bff2;

}

/* 尾部 */

footer{

width: 100%;

height: 100px;

background-color: #eceef2;

}

footer p{

font-size: 13px;

line-height: 100px;

text-align: center;

color: #acacac;

}

-----------下面是要跳转的页面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

hello!

</body>

</html>

a标签跳转不过去，请老师指正问题

小姜同学666 2020-02-10

源自：实战：挂号平台首页 5-12 项目作业

17

收起

2回答

好帮手慕言 2020-02-10 18:19:19

同学你好，是js阻止了默认事件。可以将下列红框中的内容去掉

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕言 2020-02-10 14:19:19

同学你好，使用同学提供的代码测试，是可以跳转的，如下：

效果：

同学的不能跳转，建议：1）排查a标签的路径是否正确。2）同学写了js吗？在js中是否阻止了标签的默认事件。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

提问者小姜同学666 #1

//搜索框定义 $.fn.uiReserch = function() { var ui = $(this); $('.header-reserch-select',ui).on('click',function(){ $('.header-reserch-list').show(); return false; }); $('.header-reserch-list a',ui).on('click',function(){ $('.header-reserch-select').text($(this).text()); $('.header-reserch-list').hide(); return false; }) $('body').on('click',function(){ $('.header-reserch-list').hide(); return false; }) } // tab切换框定义 // 参数含义： // tab：切换框中的item // content：每块内容的item $.fn.uiSystem = function(tab,content){ var ui = $(this); var tabs = $(tab,ui); var cons = $(content,ui); tabs.on('click',function(){ var index = $(this).index(); tabs.removeClass('item-select').eq(index).addClass('item-select'); cons.hide().eq(index).show(); }) } //脚本逻辑 $(function(){ $('.header-reserch').uiReserch(); $('.system').uiSystem('.system-menu > .system-menu-item','.system-block > .system-block-item'); }); a标签路径没问题

2020-02-10 14:57:09

相似问题

行级包含块级标签

课程问题3-2

什么时候div写在a里面，什么时候a写在div里？

a标签是这样跳转吗

a标签的href="#"也能转到顶部位置

登录后可查看更多问答，登录/注册

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载