Question

<!DOCTYPE html>
<html>
    <head>
    <title>Test</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

        <script>

             $(function() {
                $( "#tabs" ).tabs();
            });
        </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>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
                </div>
                <div id="tabs-2">
                    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
                </div>
                <div id="tabs-3">
                    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
                    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
                </div>
            </div>

</body>
</html>

我已经逐行检查了上面的代码，但找不到它无法正常工作的原因。我见过许多类似的例子，它们的代码看起来一样，但是我的代码不起作用。有人可以帮帮我吗。

Answer 1

您不需要为简单标签添加jquery UI，而是使用以下代码

加载jquery UI样式或执行以下替代解决方案

脚本.js

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script type="text/javascript">
   $(function(){
     $('ul.header li').on("click",function(){

       $('.tab_content > div').hide();
       $('#tab-'+($(this).index()+1)).fadeIn();

       /* for adding slected class */
       $('.selected_li').removeClass('selected_li');
       $(this).addClass('selected_li');
     });
   });
</script>

<强>的style.css

<style>
  .tab_content > div {
    display: none;
  }
  .tab_content > #tab-1 {
    display: block;
  }
</style>

<强> HTML

 <ul class="header">
  <li class="selected_li">Nunc tincidunt</li>
  <li>Proin dolor</li>
  <li>Proin dolor</li>
</ul>
<div class="tab_content">
  <div id="tab-1" >test content 1</div>
  <div id="tab-2">test content  2</div>
  <div id="tab-3">test content  3</div>
</div> <!-- tab_content -->

谢谢，如果有帮助，请告诉我

更新： - 执行以下样式以获得更好的效果

<style>
  .tab_content > div {
    display: none;
  }
  .tab_content > #tab-1 {
    display: block;
  }

  .header {
    padding: 0; margin: 0;
  }
  .header li {
    float: left;
    background: #FFF;
    color: #036; cursor: pointer;
    padding: 8px; border: 1px solid #036;
  }
  .header .selected_li {
    background: #036;
    color: #FFF;
  }
  .clear {
    clear:both;
  }
  .tab_content {
    padding: 8px;
    border: 1px solid #036;
  }
</style>

谢谢

Answer 2

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
        <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"/></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"/></script>

        <script type="text/javascript">
            $(function() {
                $("#tabs").tabs();
            });
        </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>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. .</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis..</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, .</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo</p>
        </div>
    </div>

</body>
</html>

坚持创建一个简单的jQuery选项卡

2 个答案: