Question

当我点击标签时，它会显示关联的内容。我正在使用#来执行此操作。这是我尝试过的，但我不知道如何进行切换部分，有人可以帮忙吗？

所以当点击tab1显示tab1内容，然后点击tab2显示tab2内容等等。

＆＃13;

$(document).ready(function () {
    $('.tab-content:not(:first)').hide();
    $('.tab-menu li a').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

＆＃13;

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

＆＃13;

编辑，我不想使用jQuery UI或任何插件。

Answer 1

你在这里非常接近，只有几件事：

1）我建议应用＆＃34; active＆＃34;父类<nav id ="topNav" class="navbar navbar-default"> <h3>Text</h3> <form class="navbar-form navbar-right navbar-input-group" role="search">的类，因此您的突出显示将更容易到达

2）使用点击链接的<li>来切换内容，我会使用一个类隐藏/显示内容，但是我会按照你使用href的例子提供jQuery和show()方法。这两种方法都可行。

最终的jQuery会是这样的：

hide()

它在小提琴中工作以供参考：http://jsfiddle.net/yscbeaxh/

Answer 2

解决方案非常简单。

首先，我为所有标签display none和活动课display:block; 与jquery相比，我采用您点击的href的{{1}}值，而不是将其用作选择器以将<a>激活添加到右侧标签。

demo

HTML：

class

的CSS：

<ul class="tab-menu">
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
  <li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs">
  <p id="tab-1" class="tab-content active">Content 1</p>
  <p id="tab-2" class="tab-content">Content 2</p>
  <p id="tab-3" class="tab-content">Content 3</p>
</div>

Jquery的：

.tab-menu {
  padding: 0;
}
.tab-menu li {
  display: inline-block;
}
.tab-menu .active {
  background: yellow;
}
.tabs{
  width:50%;
}
.tabs > p{
 display:none;
}
.tabs .active{
 display:block;
}

Answer 3

确实很难找到合适的标签。你当前的代码并不算太差，但你最终会面临打嗝。我不能说什么OTTOMH，但是，你会;）。

对于您当前的代码，您需要从点击href中获取li属性，选择匹配的p（基于ID - 方便href attr返回#tab-1，您可以将其用作选择器！），并显示它。您还需要隐藏其他“有效”标签，并从任何“有效”标签中删除该类。

这段代码可以解决问题。

$(document).ready(function () {
    $('.tab-content:not(:first)').hide();
    $('.tab-menu li a').click(function () {
        $('.tab-menu li a.active').removeClass('active');
        var tabDivId = $(this).attr('href');
        $(this).addClass('active').siblings().removeClass('active');
        $('p.tab-content').hide();
        $(tabDivId).show();
    });
});

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

如何在没有jQuery UI的情况下创建简单的jQuery选项卡？

3 个答案: