부트 스트랩 탐색 모음에서 드롭 다운 탭이 제대로 작동하지만 다른 기본 메뉴 탭 링크가 작동하지 않습니다.

Question

비슷한 질문이 많이 나왔습니다. 탭 중 하나에 하위 메뉴를 추가하고 드롭 다운 목록으로 설정할 때까지 내 부트 스트랩 navbar가 정상적으로 작동했습니다. 하지만이 후에 메인 메뉴의 다른 탭은 작동을 멈췄습니다. 여기 내 html로 머리의 일부입니다

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js "></script> 
<script type="text/javascript" src="app.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 

이 내 네비게이션 바있다 :

<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="index">Home</a></li> 
    <li><a href="resume" data-toggle="tab">Resume</a></li> 
    <li class="dropdown"> 
     <a href="java" class="dropdown-toggle" data-toggle="dropdown">Portfolio 
      <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li class="secondLayer"><a class="font" href="java">Java</a></li> 
      <li class="secondLayer"><a href="cSharp">C-sharp</a></li> 
      <li class="secondLayer"><a href="uml">UML</a></li> 
     </ul> 
    </li> 
    <li><a href="contactMe" data-toggle="tab">Contact Me</a></li> 
    <li><a href="aboutMe" data-toggle="tab">About Me</a></li> 
</ul> 

이 사람이 나를 도와 주 시겠어요?

Answer 1

당신이 다만 연결 같이 행동하는 것을 원하는 경우에, data-toggle="tab"를 모두에서 제거하십시오. 부트 스트랩에는 일부 JS 플러그인이 연결되어있어서 탭이 활성화되어 일반적인 탐색에 꽤 유용하지만 링크 만 있고 CSS 만 원하면 해당 기능을 첨부 할 필요가 없습니다.

여기에 fiddle이 있습니다.

Answer 2

을 추가하기 전에 이것이 어떻게 작용했는지 확실하지 않습니다. . 문제는 모든 태그가 href="index"과 같고 ID가 있음을 나타 내기 위해 #이 누락되었습니다. 모두 href="#index"처럼 변경하십시오. 실제로 이러한 탭으로 모든 참조를 제거,하지 탭, 잘못된 요소를 사용하는 링크 수 있도록하려면

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#index">Home</a></li> 
 
    <li><a href="#resume" data-toggle="tab">Resume</a></li> 
 
    <li class="dropdown"> 
 
    <a href="java" class="dropdown-toggle" data-toggle="dropdown">Portfolio 
 
      <span class="caret"></span></a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li class="secondLayer"><a class="font" href="java">Java</a></li> 
 
     <li class="secondLayer"><a href="cSharp">C-sharp</a></li> 
 
     <li class="secondLayer"><a href="uml">UML</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#contactMe" data-toggle="tab">Contact Me</a></li> 
 
    <li><a href="#aboutMe" data-toggle="tab">About Me</a></li> 
 
</ul> 
 

 

 

 
<div class="tab-content"> 
 

 
    <div class="tab-pane active" id="index">index</div> 
 
    <div class="tab-pane" id="resume">resume</div> 
 
    <div class="tab-pane" id="contactMe">contactMe</div> 
 
    <div class="tab-pane" id="aboutMe">aboutMe</div> 
 
</div>

주 : 아래의 예를 참조하십시오 당신의 hrefs에있는 URL을 토글하고 사용하십시오 href="index.html"