Bootstrap选项卡窗格激活oncl​​ick

时间:2018-01-18 13:13:43

标签: jquery html twitter-bootstrap

的index.html

<div class="ban_km font_bold">
 <a class="redrct_tab" href="Maintenance-schedule">know more</a>
</div>

maintenance schedule.html

<ul id="leadbann" class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"></li>
  <li role="presentation"></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="maintehance"></div>
  <div role="tabpanel" class="tab-pane" id="warranty"></div>
</div>

直接回答我的问题。每当我点击 index.html 中的知道更多链接时,它都会重定向到维护计划页面。

工作正常。我需要第二个<li>,第二个tab-pane应该获得活动类。应该删除第一个活跃的儿童。如何通过jquery进行此操作。

2 个答案:

答案 0 :(得分:0)

这是静态网站吗?或者说,MVC项目?你在使用任何layout.cshtml文件吗?

不是,你应该基本上将活动类添加到你的第二个列表元素。你不需要Jquery。

 <div class="tab-content">
<div role="tabpanel" class="tab-pane" id="maintehance">

</div>

<div role="tabpanel" class="tab-pane active" id="warranty">

</div>
</div>

答案 1 :(得分:0)

HTML :(替换schedule.html中的行)

Finished 'bundle:spa-stage' after 1.42 min
[18:43:03] Starting 'copy:index.html'...
[18:43:03] 'copy:index.html' errored after 31 ms
[18:43:03] Error: Invalid dest() folder argument. Please specify a non-empty string or a function.
    at Gulp.dest (D:\xx\xx\universal\node_modules\vinyl-fs\lib\dest\index.js:21:11)
    at D:\xx\xx\universal\tools\build\gulp-helpers.js:56:36
    at D:\xx\xx\universal\node_modules\lazypipe\index.js:27:19
    at Array.map (<anonymous>)
    at build (D:\xx\xx\universal\node_modules\lazypipe\index.js:26:37)
    at Object.exports.debug (D:\xx\xx\universal\tools\build\gulp-helpers.js:57:7)
    at copy (D:\xx\xx\universal\tools\build\gulp-tasks.js:90:18)
    at bound (domain.js:301:14)
    at runBound (domain.js:314:12)
    at asyncRunner (D:\xx\xx\universal\node_modules\async-done\index.js:55:18)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

Jquery:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul id="leadbann" class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
   Some Content
  </li>
  <li role="presentation">
    Some Content
  </li>
</ul>

<div class="tab-content" id="div">
  <div role="tabpanel" class="tab-pane active" id="maintehance">
    Some Content
  </div>

  <div role="tabpanel" class="tab-pane" id="warranty">
    Some Content
  </div>
</div>

Check in JSFiddle