文章/答案/技术大牛

发布

社区首页 >问答首页 >JQuery UI -将内容区域链接到选项卡

问JQuery UI -将内容区域链接到选项卡
EN

Stack Overflow用户

提问于 2009-11-17 19:47:55

回答 1查看 329关注 0票数 1

上下文:尝试将选项卡链接到html页面上的特定内容div；使用JQuery UI 1.72和JQuery核心1.3.2...

下面的示例代码:尝试将#tab-1链接到#message-1，依此类推，但没有太多成功；在web上搜索工作示例，但找不到任何具体的东西；

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.7.2.custom.css"/>
        <script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                // Initialise Tabs
                $('#tabs').tabs();

            });
        </script>


</head>
<body>
<div id="wrapper">
  <div id="container">
    <div id="header">
     NAV GOES HERE
    </div>
    <div id="bannerArea">
    <div id="message-1">
    This is message 1
    </div>
    <div id="message-2">
    This is message 2
    </div>
     <div id="message-3">
    This is message 3
    </div> <div id="message-4">
    This is message 4
    </div>

    </div>
    <div id="prodInfo">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 001</a></li>
                <li><a href="#tabs-2">Tab 002</a></li>
                <li><a href="#tabs-3">Tab 003</a></li>
                <li><a href="#tabs-4">Tab 004</a></li>
            </ul>
            <div id="tabs-1">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem quis neque adipiscing nec consequat nisl varius. Curabitur tincidunt, ante sed pulvinar vestibulum, urna dui viverra ligula, quis tincidunt tellus urna quis orci. Fusce a lacinia ante. Donec suscipit tellus turpis. Quisque nec massa eget ante imperdiet imperdiet. Mauris eget aliquet neque. In nisi dui, dictum ut tempor at, consequat vitae lorem. Nullam a nunc enim, ut sodales magna. Nam bibendum metus nec nulla dignissim interdum. Praesent facilisis euismod tincidunt. Vivamus cursus, turpis sit amet cursus euismod, lorem mauris tincidunt justo, euismod tempor tortor urna ac est. Nunc elit magna, rutrum at tempus bibendum, scelerisque sit amet massa. Vivamus et lectus ante, id dictum augue. </p>
          </div>
            <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
            <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
            <div id="tabs-4">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>

        </div>
    </div>
  </div>
</div>
</body>
</html>

jquery

jquery-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2009-11-17 20:06:30

您应该为您的链接定义单击行为，例如：

$('a.opentab1').click(function() {
  $('#tabs-2, #tabs-3, #tabs-4').hide();
  $('#tabs-1').show();
});

您的链接应该如下所示：<a href="javascript:;" class="opentab1"></a>

就我个人而言，我要做的就是稍微修改一下你的HTML：

首先，这样定义你的链接：<a href="javascript:;" class="opentab"></a>

Then，your tabs <div class="tab"></div>

Now，
JQuery，你只需要这样做：

$('a.opentab').each(function(i) { $(this).click(function() { $('.tab').hide(); $('.tab:eq('+i+')').show();

}); });

(由于某些原因，我无法正确格式化它，如果您知道如何编辑，请随意编辑：)

以下是修改后的代码：

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.7.2.custom.css"/>
<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
                $(function(){

                        //init
                        $('.tab, .message').hide(); 
                        $('.tab:eq(0), .message:eq(0)').show();


                        //define click for every link
                        $('ul#tab-links a').each(function(i) {
                            $(this).click(function() {
                                $('.tab, .message').hide(); 
                                $('.tab:eq('+i+'), .message:eq('+i+')').show();
                            });
                        });
                });
        </script>


</head>
<body>
<div id="wrapper">
  <div id="container">
    <div id="header">
     NAV GOES HERE
    </div>
    <div id="bannerArea">
    <div id="message-1" class="message">
    This is message 1
    </div>
    <div id="message-2" class="message">
    This is message 2
    </div>
     <div id="message-3" class="message">
    This is message 3
    </div> <div id="message-4" class="message">
    This is message 4
    </div>

    </div>
    <div id="prodInfo">
        <div id="tabs">
                <ul id="tab-links">
                        <li><a href="#tabs-1">Tab 001</a></li>
                        <li><a href="#tabs-2">Tab 002</a></li>
                        <li><a href="#tabs-3">Tab 003</a></li>
                        <li><a href="#tabs-4">Tab 004</a></li>
                </ul>
                <div id="tabs-1" class="tab">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem quis neque adipiscing nec consequat nisl varius. Curabitur tincidunt, ante sed pulvinar vestibulum, urna dui viverra ligula, quis tincidunt tellus urna quis orci. Fusce a lacinia ante. Donec suscipit tellus turpis. Quisque nec massa eget ante imperdiet imperdiet. Mauris eget aliquet neque. In nisi dui, dictum ut tempor at, consequat vitae lorem. Nullam a nunc enim, ut sodales magna. Nam bibendum metus nec nulla dignissim interdum. Praesent facilisis euismod tincidunt. Vivamus cursus, turpis sit amet cursus euismod, lorem mauris tincidunt justo, euismod tempor tortor urna ac est. Nunc elit magna, rutrum at tempus bibendum, scelerisque sit amet massa. Vivamus et lectus ante, id dictum augue. </p>
          </div>
                <div id="tabs-2" class="tab">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
                <div id="tabs-3" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
                <div id="tabs-4" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>

        </div>
    </div>
  </div>
</div>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/1748328

复制

相似问题

问JQuery UI -将内容区域链接到选项卡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery UI -将内容区域链接到选项卡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery UI -将内容区域链接到选项卡
EN