Question

我想要一个包含多个可见部分和一个不可见部分的导航元素，然后在第一部分有一个链接（一个href），它将以编程方式将不可见的导航部分设置为可见并显示它的内容。我试着像

那样做

 function MyClick(event){
            $(".nav").find(".active").removeClass("active");
            x = document.getElementById("artu");
            x.style.display="block";
            x.className += ' active';
            window.location.href = "#articolex";
            window.location.hash = '#articolex';
       }

或者更好地查看此jsfiddle中的完整代码但它不起作用......

在我的实际代码（不是jsfiddle）中，javascript函数工作正常，它确实将所需的选项卡设置为可见且活动但仍然没有更改＆＃34;页面内容＆＃34;到我想要的部分。我不知道为什么jsfiddle没有做我的实际代码所做的...但无论如何，我的问题还有：我需要链接作为导航项目的实际点击。

请告知。

Answer 1

拥有带有href和onclick的A标签并不能真正起作用。由于您已经在使用jQuery，因此您可以通过为link元素指定id并使用以下命令来更轻松地使用jQuery click事件：

$("#goto").click(function() {
    $(".nav").find('.active').removeClass('active');
    $("#artu").css("display", "block");
    $("#artu").addClass("active");
    $("#home").removeClass("in active");
    $("#articolex").addClass("in active");
    //etc
});

下面的完整摘录

＆＃13;

$("#goto").click(function() {
  $(".nav").find('.active').removeClass('active');
  $("#artu").css("display", "block");
  $("#artu").addClass("active");
  $("#home").removeClass("in active");
  $("#articolex").addClass("in active");
  //etc
});

＆＃13;

body {
  margin: 5px;
  background: #A6A6A6
}
/* Tab Navigation */

.nav-tabs {
  margin: 0;
  padding: 0;
  border: 0;
}
.nav-tabs > li > a {
  background: #DADADA;
  border-radius: 0;
  box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .4), -2px -2px 5px -2px rgba(0, 0, 0, .4);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: #F5F5F5;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4), -2px -3px 5px -2px rgba(0, 0, 0, .4);
}
/* Tab Content */

.tab-pane {
  background: #F5F5F5;
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  border-radius: 0;
  text-align: center;
  padding: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <header>
    <!-- header pagecontrol -->
    <div class="container">
      <h2>Stuff</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">Menu1</a>
        </li>
        <li>
          <a data-toggle="tab" href="#menu2">Menu2</a>
        </li>
        <li id="artu" style="display:none">
          <a data-toggle="tab" href="#articolex">Menu4</a>
        </li>
      </ul>
      <!-- content pages -->
      <div class="tab-content">
        <!-- home page -->
        <div id="home" class="tab-pane fade in active">
          <h3>Home</h3>
          <p>
            Some content
          </p>
          <a id="goto" title="Go to Menu4" href="#">Go to Menu4</a>
        </div>

        <!-- articol -->
        <div id="menu1" class="tab-pane fade">
          <h3>Menu1</h3>
          <p>
            Other content
          </p>
        </div>
        <!-- articol -->
        <div id="articolex" class="tab-pane fade">
          <h3>Menu4</h3>
          <p>
            Special content
          </p>
        </div>
        <!-- articol -->
        <div id="menu2" class="tab-pane fade">
          <h3>Menu2</h3>
          <p>
            Another content
          </p>
        </div>


      </div>
    </div>
  </header>
</div>

＆＃13;

Bootstrap nav转到部分

1 个答案: