html - Nested Tabs - Twitter Bootstrap -
so trying develop web page has nested tabs
that means have 2 tabs , when press on 1 of them able see 2 tabs.
the first level of tabs working fine me, nested tab not. mean have 2 tab different content , working properly.
but issue when press first tab (the 1 has nested tabs inside) can see content of both tabs directly. although setting 1 of them active.
i tried make none of nested tabs active not make sense, tried , expected made no difference
here html page
<!doctype html> <html> <head> <title>github evaluator</title> <script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> <script type='text/javascript' src='js/knockout-2.3.0.js'></script> <script src="js/bootstrap.min.js"></script> <script src="js/searchmodel.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/sticky-footer.css" rel="stylesheet"> </head> <body> <div id="wrap"> <div class="container"> <div class="page-header"> <h1>github evaluator</h1> </div> <!-- search form --> <div class="row well" id="masterscope"> <form class="form-inline"> <label>repo name:</label> <input data-bind="value: reponame" type="text" class="form-control" style="width: 30%" placeholder="repo name"> <label>username:</label> <input data-bind="value: username" type="text" class="form-control" style="width: 30%" placeholder="username"> <button data-bind="click: getrepoinfo" class="btn btn-primary">search</button> </form> </div> <!-- search form --> <!-- tabs --> <ul class="nav nav-tabs" id="tabs"> <li><a href="#repository" data-toggle="tab">repository</a></li> <li><a href="#user" data-toggle="tab">user</a></li> </ul> <!-- tabs --> <!-- tab content --> <div class="tab-content"> <!-- repo --> <div class="tab-pane active" id="repository"> <h2 id="falserepository" class="text-danger">repo not found!</h2> <!-- repo content --> <dl id="repo" data-bind="with: repository" class="dl-horizontal"> <!-- repo tabs ---> <ul class="nav nav-tabs" id="repotabs"> <li><a href="#repoinfo" data-toggle="tab">info</a></li> <li><a href="#repostats" data-toggle="tab">stats</a></li> </ul> <!-- repo tabs --> <!-- repo stats --> <div class="tab-pane" id="#repostats"> hello world </div> <!-- repo stats --> <!-- repo info --> <div class="tab-pane active" id="repoinfo"> <dt>repo id:</dt> <dd data-bind="text: id"></dd> <dt>repo name:</dt> <dd data-bind="text: name"></dd> <span data-bind="with: owner"> <dt>owner name:</dt> <dd data-bind="text: login"></dd> <dt>owner url:</dt> <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd> </span> <dt>private:</dt> <dd data-bind="text: isprivate"></dd> <dt>url:</dt> <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd> <dt>created at:</dt> <dd data-bind="text: createdat"></dd> <dt>size:</dt> <dd data-bind="text: size"></dd> <dt>language:</dt> <dd data-bind="text: language"></dd> </div> <!-- repo info --> </dl> <!-- repo content --> </div> <!-- repo --> <!-- users --> <div class="tab-pane" id="user"> <h2 id="falseuser" class="text-danger">user not found!</h2> <!--user content--> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone"> collapsible group item #1 </a> </div> <div id="collapseone" class="accordion-body collapse in"> <div class="accordion-inner"> ... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsetwo"> collapsible group item #2 </a> </div> <div id="collapsetwo" class="accordion-body collapse"> <div class="accordion-inner"> ... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsethree"> collapsible group item #3 </a> </div> <div id="collapsethree" class="accordion-body collapse"> <div class="accordion-inner"> ... </div> </div> </div> </div> <!--user content--> </div> <!-- users --> </div> <!-- tab content --> </div> </div> <div id="footer"> <div class="container"> <p class="text-muted credit">awesome github evaluator michal, abdul , nick</p> </div> </div> <!--</script>--> </body> </html>
fixed following in code:
- remove
#"repo stats"id:#repostatsshouldrepostats - wrap 2 sub-tabs "repo stats" , "repo info" in
<div class="tab-content">
here working jsfiddle.
Comments
Post a Comment