Jump to content

Bootstrap and HTML coding nav bar tabs question


sotiria
 Share

Recommended Posts

I'm no very well versed in web coding but have been doing some crash courses this week. I have successfully designed my front end for my module on the Nano, but I have an issue that I can't seem to solve. When I click any of the tabs, it goes back to the main dashboard. To me it acts like it can't find the referring id tags?

This all works fine and dandy on my local machine, the only difference is that i have some cdn tags as I am not running a server on my desktop. To prove to myself if it was something I was missnig, I grabbed the basic code from the w3schools website. Threw it on my desktop, it worked. Threw this on the Nano and I get the same response, if I click on any of the tabs, it goes to the dashboard.

Does anyone know what it is that I am missing? I'm not going to post my code as I don't want to torture anyone.


<div class="container">
  <h2>Dynamic Tabs</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

This is the URL that I took this from and works locally..only difference here is that I took the head,meta,html and cdn tags out.

Link to comment
Share on other sites

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

It's because of your links. Turn on your NANO, go to the web interface, and after the pound sign in the URL type home (or anything for that matter) and it will bring you straight to the dashboard.

Link to comment
Share on other sites

OHH... so something like this then... where essentially you're just replacing href with data-target so as not to use anchors.. (yes.. pretty obvious I'm n00b to web development and gui)

div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</butto
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

I tried this on the Nano and it worked.. now I just have to incorporate that from the code I already made.. thanx again boys!

Edited by sotiria
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...