HTML, CSS Bootstrap

Question

I need to make menu in bootstrap with nav-pills. I have 5 sections in menu and each section have text (Like first is "aaaa", second is "bbbb", etc). If I click on first section it shows text "aaaa" and click on second section it shows text "bbbb", but if I click on third/fourth/ fifth section nothing happens.

Any ideas how to resolve this? Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>APK Market</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="navbar">
    <ul class="nav nav-pills">
        <li class="active"><a data-toggle="tab" href="#games">Games</a></li>
        <li><a data-toggle="tab" href="#apps">Apps</a></li>
        <li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
        <li><a data-toogle="tab" href="#themes">Themes</a></li>
        <li><a data-toogle="tab" href="#archive">Archive</a></li>
     </ul>
</div>
</div>
<div class="tab-content">
<div id="games" class="tab-pane active">aaaaaaaaaaaa</div>
<div id="apps" class="tab-pane">bbbbbbbbbbbbb</div>
<div id="live_wallpapers" class="tab-pane">ccccccccccc</div>
<div id="themes" class="tab-pane">ddddddddddd</div>
<div id="archive" class="tab-pane">eeeeeeeeee</div>
</div>
</div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Move your code to jsfiddle for better presentation. That will also give others ability to edit your code and try some solutions, and understand your problem better. — alexp, Feb 14 '14 at 21:51
JIC, http://stackoverflow.com/questions/17251586/using-twitters-bootstrap-in-jsfiddle — alexp, Feb 14 '14 at 22:01
@alexp Code in JS Fiddle is good for editing and testing but the purpose of SO is to provide full answers to full questions which means outside sources for code either in the answer or question is going to diminish the value of the question for future readers having the same problem. — Mihai Stancu, Feb 14 '14 at 22:19
@MihaiStancu that's true. Having the problematic code in the topic is important. And still link on JS Fiddle is much appreciated. — alexp, Feb 16 '14 at 03:27

score 4 · Answer 1 · answered Feb 14 '14 at 22:12

You spelled "toggle" wrong.

<li><a data-toogle="tab" href="#live_wallpapers">Live Wallpapers</a></li>
<li><a data-toogle="tab" href="#themes">Themes</a></li>
<li><a data-toogle="tab" href="#archive">Archive</a></li>

change data-toogle to data-toggle..

HTML, CSS Bootstrap

1 Answers1