Web Development

Our forums are currently in maintenance mode and the ability to post is disabled. We will be back up and running as soon as possible. Thanks for your patience!

Question

Locked

Bootstrap 3 buttons to make page jump links within the page content.

By jen1544630932 ·
Hi hoping you can help me figure this out. I am trying to add jump links within the page for <button> without having to use a href links on the text (it changes styles when I do this I want the whole button? What am I missing? I have googled online for a solution and I can't seem to get this figured out. It has to be bootstrap 3 version. Thank you in advance.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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">
<script src="/script>">https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/script>">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Split Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="collapse" data-target="#one" href="#one">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#two">Tablet</a></li> (what if I want the whole block button instead of text?
<li><a href="#three">Smartphone</a></li>
</ul>
</div>
</div>
<h2 style="margin-top:300px;" id="one">SONY</h2>
<h3 style="margin-top:200px;" id="two">Tablet</h3>
<h4 style="margin-top:200px;" id="three">Smartphone</h4>
</body>
</html>

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Answers

Share your knowledge

Related Discussions

Related Forums