sotiria Posted February 21, 2016 Share Posted February 21, 2016 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. Quote Link to comment Share on other sites More sharing options...
sud0nick Posted February 22, 2016 Share Posted February 22, 2016 <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. Quote Link to comment Share on other sites More sharing options...
sotiria Posted February 22, 2016 Author Share Posted February 22, 2016 Thanks for the reply, maybe it was my wording.. I don't want it to go back to the main dashboard. If I hit a tab, I want it to go to the href link and ID. Is there something that I am missing or not doing right? Quote Link to comment Share on other sites More sharing options...
sud0nick Posted February 22, 2016 Share Posted February 22, 2016 Yes and I told you the problem. You'll have to find another way of doing that. Try using Javascript or ng-show and ng-hide in bootstrap with panels. You can't use anchor tags like you wanted. Quote Link to comment Share on other sites More sharing options...
sotiria Posted February 22, 2016 Author Share Posted February 22, 2016 Ah, gotcha,I misunderstood what you meant. I'll definitely take stab at that and look into it. I really do appreciate your tips and pointing me in the right direction. Quote Link to comment Share on other sites More sharing options...
Sebkinne Posted February 22, 2016 Share Posted February 22, 2016 You can simply use data toggles :) Best regards, Sebkinne Quote Link to comment Share on other sites More sharing options...
sotiria Posted February 23, 2016 Author Share Posted February 23, 2016 (edited) 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 February 23, 2016 by sotiria Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.