Question

上下文：尝试将标签链接到html页面上的特定内容div;使用JQuery UI 1.72和JQuery核心1.3.2 ...

下面的示例代码：尝试将＃tab-1链接到＃message-1等等但没有取得多大成功;在网上搜索了一个工作示例，但找不到任何具体的内容;

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

Answer 1

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

$('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>
然后，您的标签<div class="tab"></div>
现在，使用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>

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

1 个答案: