如何添加“主动”类动态地引导3导航，标签？ [英] How do I add 'active' class dynamically for Bootstrap 3 nav-tabs?

查看：88
本文介绍了如何添加“主动”类动态地引导3导航，标签？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用引导3 asp.net Web窗体与母版页。在我的母版页我有垂直 NAV-标签页上点击一个按钮时，其滑动页面的右侧。在这些个人 NAV-标签页我有默认的水平引导 NAV-标签页。我的问题是，我要动态添加/使用Javascript使用删除活动类。

在垂直选项卡我已删除了类=活跃最初并希望将其添加到各个垂直导航选项卡上单击它。当我再次点击它，它应该返回到原来的颜色。

下面是母版页code：

 ＆LT; D​​IV CLASS =标签窗格tabPanesID =rightTab1＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; UL类=净值资产净值的选项卡角色=标签列表＆GT;
            ＆LT;李作用=presentation级=主动＆GT;
                ＆LT; A HREF =＃rightTab1_1唱段的控件=家的角色=标签数据切换=标签＆GT;家庭和LT; / A＆GT;
            ＆LT; /李＆GT;            ＆LT;李作用=presentation＆GT;
                ＆LT; A HREF =＃rightTab1_2唱段的控件=配置文件角色=标签数据切换=标签＆GT;简介＆LT; / A＆GT;
             ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =标签窗格tabPanesID =rightTab2＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; UL类=净值资产净值的选项卡角色=标签列表＆GT;
            ＆LT;李作用=presentation级=主动＆GT;
                ＆LT; A HREF =＃rightTab2_1唱段的控件=家的角色=标签数据切换=标签＆GT;家庭和LT; / A＆GT;
            ＆LT; /李＆GT;            ＆LT;李作用=presentation＆GT;
                ＆LT; A HREF =＃rightTab2_2唱段的控件=配置文件角色=标签数据切换=标签＆GT;简介＆LT; / A＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =行＆GT;
    ＆LT; UL类=净值资产净值的选项卡标签向右侧身＆GT;
        ＆LT;李ID =NAV1＆GT;＆LT; A HREF =＃rightTab1数据切换=标签＆GT; TAB1＆LT; / A＆GT;＆LT; /李＆GT;
        ＆LT;李ID =NAV2＆GT;＆LT; A HREF =＃rightTab2数据切换=标签＆GT; TAB2＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;

我的javascript：

  $（文件）。就绪（函数（）{
    $（＃rightTab1），隐藏（）。
    $（＃rightTab2），隐藏（）。
    $（＃rightTab3），隐藏（）。    $（＃NAV1）。点击（函数（）{
        如果（$（＃rightTab1）是（：隐藏）及和放大器; $（＃rightTab2）是（：可见））{
            $（＃rightTab1），延时（1000）.show（'滑'，{方向：正确}，500）;
            $（＃rightTab2）隐藏（'滑'，{方向：正确}，500）;
        }        否则，如果（$（＃rightTab1）是（：隐藏）及和放大器; $（＃rightTab2）是（：隐藏））{
            $（＃rightTab1）显示（'滑'，{方向：正确}，500）。
            $（＃rightTab2）隐藏（'滑'，{方向：正确}，500）;
        }        其他{
            $（＃rightTab1）隐藏（'滑'，{方向：正确}，500）;
            $（杯酒人生李一。）removeClass移除（激活）。
        }
    }）;
}）;

请帮助我。先谢谢了。


解决方案

在单击使用href和它做工精细看到这个例子中，没有必要写的jQuery它的自我

\r
\r

$（'[数据切换^ =丸]'）。点击（函数（五）{\r
\r
\r
  如果（$（本）.parent（）。hasClass（激活））{\r
    的console.log（$（本）.parent（）。removeClass移除（激活））\r
    的console.log（$（$（本）.attr（'href属性））。removeClass移除（'主动'））\r
\r
  }其他{\r
    $（'[数据切换^ =丸]'）。父（）。removeClass移除（激活）\r
    $（'[^类=标签窗格]'）。removeClass移除（'主动'）\r
\r
    的console.log（$（本）.parent（）。addClass（激活））\r
    的console.log（$（$（本）.attr（'href属性））。addClass（'主动'））\r
  }\r
\r
  e.stopPropagation（）;\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML LANG =ENGT＆;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;标题＆GT;引导案例＆LT; /标题＆GT;\r
  ＆LT;间的charset =UTF-8＆GT;\r
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;\r
  ＆LT;链接rel =stylesheet属性HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css＆GT;\r
  ＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js＆GT;＆下; /脚本＆GT;\r
  ＆所述; SCRIPT SRC =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
\r
  ＆LT; D​​IV CLASS =容器＆GT;\r
    ＆LT; H2＆GT;动态丸＆LT; / H＆GT;\r
    ＆LT; UL类=净值资产净值药丸＆GT;\r
      ＆LT;立GT;＆LT;数据拨动=丸的href =＃家＆GT;家庭和LT; / A＆GT;\r
      ＆LT; /李＆GT;\r
      ＆LT;立GT;＆LT;数据拨动=丸的href =＃MENU1＆GT;菜单1 LT; / A＆GT;\r
      ＆LT; /李＆GT;\r
      ＆LT;立GT;＆LT;数据拨动=丸的href =＃MENU2＆GT;菜单2'; / A＆GT;\r
      ＆LT; /李＆GT;\r
      ＆LT;立GT;＆LT;数据拨动=丸的href =＃菜单3＆GT;菜单3'; / A＆GT;\r
      ＆LT; /李＆GT;\r
    ＆LT; / UL＆GT;\r
\r
    ＆LT; D​​IV CLASS =标签内容＆GT;\r
      ＆LT; D​​IV ID =家类=标签窗格变脸＆GT;\r
        ＆LT; H3＆GT; HOME＆LT; / H3 GT＆;\r
        ＆LT; P＆GT; Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麦格纳aliqua＆LT; / P＆GT;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV ID =MENU1类=标签窗格变脸＆GT;\r
        ＆LT; H3＆GT;菜单1 LT; / H3 GT＆;\r
        ＆LT; P＆GT; UT斯达康enim广告微量veniam，QUIS nostrud实习ullamco laboris暂准UT aliquip前EA commodo consequat＆LT; / P＆GT;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV ID =MENU2类=标签窗格变脸＆GT;\r
        ＆LT; H3＆GT;菜单2'; / H3 GT＆;\r
        ＆LT; P＆GT;桑达UT perspiciatis理解过程OMNIS ISTE了Natus错误坐voluptatem accusantium doloremque laudantium，totam REM aperiam＆LT; / P＆GT;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV ID =菜单3类=标签窗格变脸＆GT;\r
        ＆LT; H3＆GT;菜单3'; / H3 GT＆;\r
        ＆LT; P＆GT; Eaque IPSA quae AB​​伊洛inventore veritatis等准architecto beatae简历格言必须遵守explicabo＆LT; / P＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

I am using Bootstrap 3 with asp.net Web Forms with Master Page. In my Master Page I have vertical nav-tabs on the right of the page which slide when clicking a button. Within those individual nav-tabs I have default horizontal Bootstrap nav-tabs. My problem is, I want to dynamically add/remove the active class using using Javascript.

In the vertical tabs I have removed the class="active" initially and want to add it to the individual vertical nav tab on clicking it. And when I click on it again, it should return to its original color.

Here's the Master Page code :

<div class="tab-pane tabPanes" id="rightTab1">
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#rightTab1_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
            </li>

            <li role="presentation">
                <a href="#rightTab1_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
             </li>
        </ul>
    </div>
</div>

<div class="tab-pane tabPanes" id="rightTab2">
    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#rightTab2_1" aria-controls="home" role="tab" data-toggle="tab">Home</a>
            </li>

            <li role="presentation">
                <a href="#rightTab2_2" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>
            </li>
        </ul>
    </div>
</div>

<div class="row">
    <ul class="nav nav-tabs tabs-right sideways">
        <li id="nav1"><a href="#rightTab1" data-toggle="tab">Tab1</a></li>
        <li id="nav2"><a href="#rightTab2" data-toggle="tab">Tab2</a></li>
    </ul>
</div>

My Javascript :

$(document).ready(function () {
    $("#rightTab1").hide();
    $("#rightTab2").hide();
    $("#rightTab3").hide();

    $("#nav1").click(function () {
        if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":visible")) {
            $("#rightTab1").delay(1000).show('slide', { direction: 'right' }, 500);
            $("#rightTab2").hide('slide', { direction: 'right' }, 500);
        }

        else if ($("#rightTab1").is(":hidden") && $("#rightTab2").is(":hidden")) {
            $("#rightTab1").show('slide', { direction: 'right' }, 500);
            $("#rightTab2").hide('slide', { direction: 'right' }, 500);
        }

        else {
            $("#rightTab1").hide('slide', { direction: 'right' }, 500);
            $(".sideways li a").removeClass('active');
        }
    });
});

Please help me. Thanks in advance.

解决方案

Use href in click and it will work fine see this example no need to write jquery it self 

$('[data-toggle^=pill]').click(function(e) {


  if ($(this).parent().hasClass('active')) {
    console.log($(this).parent().removeClass('active'))
    console.log($($(this).attr('href')).removeClass('in active'))

  } else {
    $('[data-toggle^=pill]').parent().removeClass('active')
    $('[class^=tab-pane]').removeClass('in active') 

    console.log($(this).parent().addClass('active'))
    console.log($($(this).attr('href')).addClass('in active'))
  }

  e.stopPropagation();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <ul class="nav nav-pills">
      <li><a data-toggle="pill" href="#home">Home</a>
      </li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a>
      </li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a>
      </li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a>
      </li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade">
        <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>

</body>

</html>

这篇关于如何添加“主动”类动态地引导3导航，标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆