CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhishek
Abhishek

Reputation: 3068

tab menu error in body of html

The body of my html is as follows:

<body>
<div class="container">
<ul class="tabs">
    <li><a href="#tab1">Description</a></li>
    <li><a href="#tab2">Specs</a></li>
</ul>
<div class="pane">
    <div id="tab1">
        <h2>Hello</h2>
        <p>Hello hello hello.</p>
        <p>Goodbye goodbye, goodbye</p>
    </div>
    <div id="tab2" style="display:none;">
        <h2>Hello2</h2>
        <p>Hello2 hello2 hello2.</p>
        <p>Goodbye2 goodbye2, goodbye2</p>
    </div>
</div>
<div class="content">This should really appear on a new line.</div>
</div> 
</div>
</body>

and the head part is as follows:

<head>

<meta charset="utf-8">
<title>Edysis</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="/static/css/jquery-ui.css">
      <script src="/static/js/jquery-1.9.1.js"></script>
      <script src="/static/js/jquery-ui.js"></script>
      <script>
      $(document).ready(function() {
        $("ul.tabs a").click(function() {
             $(".pane div").hide();
              $($(this).attr("href")).show();
         });
      })
      </script>

<link href="http://themeclue.com/css/style.css" rel="stylesheet" media="screen">
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,700|Asap:400,700" rel="stylesheet" type="text/css">
<script type="text/javascript">

</script>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<h1>Edysis</h1>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a href="home">HOME</a>
</li>
<li>
<a href="free-themes">CALENDER</a>
</li>
<li>
<a href="new-themes">DEGREE PROGRAMS</a>
</li>
<li>
<a href="popular">ADVISING</a>
</li>
<li>
<a href="signin">SIGN IN</a>
</li>
<li>
<a href="signup">SIGN UP</a>
</li>
</ul>
</div> 
</div> 
</div> 
</div> 
</head>

Everything looks fine except that the tab effect does not seem to work. I tried this example here. Please let me know where my error is.

Upvotes: 0

Views: 594

Answers (1)

T J
T J

Reputation: 43156

You can start by place the following html in <head></head>

   ` <div class="navbar">
<div class="navbar-inner">
<div class="container">
<h1>Edysis</h1>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
...
</div> 
</div> `

inside <body></body>

the example you are following requireds an anchor tag directly inside an li which is the child of a ul having class='tabs'

Are you sure you're following that tutorial or something else?!

Upvotes: 1

Related Questions