坚持创建简单的jQuery选项卡

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>

I have checked the code above line by line and couldn't find the reason why it is not working. 我已经逐行检查了上面的代码，找不到它不起作用的原因。 I have seen many similar examples and their code looks the same, but mine doesn't work. 我已经看到许多类似的示例，它们的代码看起来相同，但是我的代码不起作用。 Can someone please help me. 有人可以帮帮我吗。

Answer 1

you dont need to add jquery UI for simple tabs, instead use the following code 您不需要为简单标签添加jquery UI，而是使用以下代码

load jquery UI styles or do the following alternative solution 加载jQuery UI样式或执行以下替代解决方案

Script .js 脚本.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.css

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

HTML 的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 -->

Thanks and let me know if this helps 谢谢，让我知道是否有帮助

UPDATE :- Do the Following Style for Better look 更新：-请执行以下样式以获得更好的外观

<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>

thanks 谢谢

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 个解决方案

解决方案1
0 2014-05-09 16:05:00

解决方案2
0 2014-05-09 16:56:46

坚持创建简单的jQuery选项卡

问题描述

2 个解决方案

解决方案1 0 2014-05-09 16:05:00

解决方案2 0 2014-05-09 16:56:46

解决方案1
0 2014-05-09 16:05:00

解决方案2
0 2014-05-09 16:56:46