Question

您好我想在我的展开式标签中添加加号和减号图标。当点击选项卡时我正在考虑使用css或javascript替换图标，但我不知道如何去做它

这是我到目前为止所拥有的 HTML

<h1>Responsive Tabs</h1>

<div class="tabBox">
<ul class="tabs">
    <li><a href="#tab1">Test1</a>
    </li>
    <li><a href="#tab2">Test2</a>
    </li>
    <li><a href="#tab3">Test3</a>
    </li>
</ul>
<div class="tabContainer"> <a onclick="toggle('tab1');" href="#tab1">Test1</a> 
    <div id="tab1" class="tabContent" style="display:none;">Test1</div>
<a onclick="toggle('tab2');" href="#tab2">Test2</a>

    <div id="tab2" class="tabContent" style="display:none;">Test2</div>
<a onclick="toggle('tab3');" href="#tab3">Test3</a>

    <div id="tab3" class="tabContent" style="display:none;">Test3</div>
</div>
</div>

的JavaScript

      $(".tabContent").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tabContent:first").show();

$("ul.tabs li").click(function () {
  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");
  $(".tabContent").hide();
  var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn();
  return false;
    });

  function toggle(target) {

  var artz = document.getElementsByClassName('tabContent');
  var targ = document.getElementById(target);
  var isVis = targ.style.display == 'block';

  // hide all
  for (var i = 0; i < artz.length; i++) {
      artz[i].style.display = 'none';
  }
  // toggle current
  targ.style.display = isVis ? 'none' : 'block';

  return false;
  }

剩下的就是我的jfiddle：http://jsfiddle.net/Jnewguy/5B5KJ/63/

Answer 1

我认为您正在努力让可扩展内容正确无误？您可以使用jQuery UI选项卡来扩展和关闭内容。您可以在此处预览此功能：

http://jqueryui.com/tabs/#collapsible

代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-  ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p><strong>Click this tab again to close the content pane.</strong></p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>


</body>
</html>

然后，您可以使用CSS或IMG标记来设置标签的样式。

Answer 2

我对你的代码进行了尝试，并添加了一个简单的jquery代码，向您展示如何在＆＃39; +＆＃39;之间切换。和＆＃39; - ＆＃39;图标。请注意，对于此示例，我使用了文本，但您可以用图像替换文本等等。

以下是updated jsfiddle

在你的TabContainer链接中我改变了这种方式。而不是使用内联javascript函数调用onClick，您可以通过为所有标题提供主类来简化所有内容。接下来，您可以添加自定义属性，在这种情况下，数据内容＆＃39;您要为其提供要显示的选项卡的ID。在链接标记内，我添加了一个＆＃39; span＆＃39;标记为＆＃39; +＆＃39;文本。

<a class="myTabHeader" data-content="tab1" href="#tab1">Test1 <span class="toggle-icon">+</span></a>

为了切换标签，我添加了一些jquery。我们为主标签页头类创建一个Onclick事件。点击完成后，我们可以通过获取自定义属性的值来提取要显示的选项卡的ID。接下来，我们可以使用jquery选择所有内容选项卡以隐藏所有内容。完成此操作后，您可以使用id显示当前内容选项卡。再次，使用jquery，我们定位所有切换图标并重置所有内容。最后，您可以使用＆＃39; this＆＃39;选择器，指的是当前的myTabHeader＆＃39;点击后你可以用jquery＆＃39; .find（x）＆＃39;来搜索它的子元素。方法。这样，您就可以调用＆＃39; .text（＆＃34; string＆＃34;）＆＃39;改变文本。

//On Document ready
$(function(){
    //Click event for our Accordion Tab Headers
    $('.myTabHeader').click(function(){
        //Get which tab to display
        var openTab = $(this).attr('data-content');
        //Close all visible tabs
        $('.tabContent').css({
            display:'none'
        });
        //Display our selected tab
        $('#'+openTab).css({
            display:'block'
        });
        //Reset icon
        $('.toggle-icon').text("+");
        //Change icon for currently opened tab
        $(this).find('.toggle-icon').text("-");
    });
});

当然，就像我说的那样，你可以在span元素中添加图像而不是文本。然后你可以改变这一部分：

//Reset icon
$('.toggle-icon img').attr('src','/images/path-to-Plus-icon-image.jpg');
//Change icon for currently opened tab
$(this).find('img').attr('src','/images/path-to-Minus-icon-image.jpg');

希望这有帮助！

如何在菜单标签中添加+和 -

2 个答案: