html - 链接到同一页面中的其他部分不起作用
问题描述
我想在同一页面中将按钮链接到下面的 div 组件。
我想链接到 div id 'abc' 但它似乎不起作用。我用href检查了id,它是一样的。我不知道为什么它不起作用。
<div class="col-sm-6">
<a href="#abc" class="btn btn-success" data-toggle="modal">
<i class="material-icons"></i>
<span>Add new course</span>
</a>
</div>
<p style="height:1000px">space</p>
<div id="abc" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form action="">
<div class="modal-header">
<h4 class="modal-title">
Add Course
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control typeahead" required>
</div>
<div class="form-group">
<label>Time start</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-success" value="Add">
</div>
</form>
</div>
</div>
</div>
<p style="height:1000px">space</p>
解决方案
所以我的测试片段也有效......
<div class="col-sm-6" style="margin-bottom: 6000px">
<a href="#abc" class="btn btn-success" data-toggle="modal">
<i class="material-icons"></i>
<span>Add new course</span>
</a>
</div>
<div id="abc" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form action="">
<div class="modal-header">
<h4 class="modal-title">
Add Course
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control typeahead" required>
</div>
<div class="form-group">
<label>Time start</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-success" value="Add">
</div>
</form>
</div>
</div>
</div>
推荐阅读
- angular - .gitignore 中的嵌套模块
- sql - 多表层次查询
- javascript - SpeechSynthesis 说话时随机停止说话
- javascript - 如何将用户输入保存在cordova项目的本地存储中
- excel - VBA\Excel 倒数计时器显示不正确的小时数
- python - Python3:没有名为 pip 的模块
- python - 如何在我的 Mac 上运行这个比特币 Python 模型(由 PlanB 提供)?
- mysql - MySQL 聚集索引中的磁盘 IO
- google-bigquery - 如何使用 bq load 命令加载多个 AVRO 文件
- java - Java 什么时候进行类型检查