Question

出现以下HTML问题：

iDreamMobile //

// Perform setup after the document loads:
$(function() {

    // Add a class to caption elements:
    $('.caption').addClass('darkBlue');

    // Generate tabs:
    $('#content').tabs();

    // Add a click event to the message button:
    $('#messageButton').click(showHideMessage);

    // Initially hide the message:
    $('#message').hide();


});

// This function is called when the button is clicked.
function showHideMessage(e) {
    $('#message').toggle('slow');
}


// ]]>
</script>
<link rel="stylesheet" href="assets/jquery.tabs.css" type="text/css" media="print, projection, screen" />

<style type="text/css">
    #messageButton {
    font-size: small;
    color: #DDDDDD;
    background-color: #333333;
    width: 100%;
    }

    .darkBlue {
    color: #27537a;
    }

    div#home {
    color: #a3a3a3;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    }

    div#home a {
    color: #a3a3a3;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    }

    div#idb a {
    opacity: 0.8;
    position: relative;
    bottom: 64px;
    }

</style>

<div id="content">
<ul>
    <li><a href="#home"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#DD44DD;">Home</span></a></li>
    <li><a href="#a"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#3333BB;">iDB</span></a></li>
    <li><a href="#b"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#33DD99;">iDT</span></a></li>
    <li><a href="#c"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#B0FF5E;">iDV</span></a></li>
    <li><a href="#d"><span style="font-family:helvetica; font-weight: bold; font-size:12px; color:#FFCC66;">iDS</span></a></li>
</ul>
<div id="home" align="center" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <table width="100%" cellpadding="20" cellspacing="20">
    <tr>
    <td>
    <div id="link_to_a" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#a"><img src="assets/a_btn_57.png" /><br />Page A</a>
    </div>
    </td>
    <td>
    <div id="link_to_b" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#b"><img src="assets/b_btn_57.png" /><br />Page B</a>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div id="link_to_c" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#c"><img src="assets/c_btn_57.png" /><br />Page C</a>
    </div>
    </td>
    <td>
    <div id="link_to_d" style="font-family:helvetica; font-weight: bold; font-size:12px; color: #a3a3a3; text-align: center; text-decoration: none;">
    <a href="#d"><img src="assets/d_btn_57.png" /><br />Page D</a>
    </div>
    </td>
    </tr>
    </table>
</div>
    <div id="a" align="center">
        <img src="assets/slide_image.png"><br />
        <a href="#"><img src="assets/add_image_48.png" /></a>&nbsp;&nbsp;
        <a href="#"><img src="assets/add_music_48.png" /></a>&nbsp;&nbsp;
        <a href="#"><img src="assets/add_note_48.png" /></a>
    </div>
    <div id="b" align="center">
        <table style="font-family:helvetica; font-size:12px;" cellspacing="5px" cellpadding="5px">
        <tr style="font-weight:bold;">
        <td>Task</td>
        <td>Due Date</td>
        <td>Notes</td>
        </tr>
        <tr>
        <td>placeholder</td>
        <td>placeholder</td>
        <td>placeholder</td>
        </tr>
        </table>
    </div>
    <div id="c" align="center">
    <iframe src="flash_video.swf" frameborder="0" width="320px" height="240px"> </iframe>
    </div>
    <div id="d">
        <div id="ds_postTo" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:18px;">Share your content on:</div>

各种社交网络链接或者登录我们自己的社交网络。

菜单这是选项菜单。

顶部列表中的链接完美地用于获取DIV的内容，但“link_to_a”中的链接通过“link_to_d”无法正常工作...

我可能在这里做一些蠢事 - 任何指针？

Answer 1

您正试图在网页中使用anchors从一个地方到另一个地方。您需要引用所需位置的id。

检查小提琴，我在下面添加了正确的目标，两个锚点工作正常。 http://jsfiddle.net/YXxwz/

Answer 2

您的代码很好，但某些代码未关闭。

W3C验证器将帮助您调试它：http://validator.w3.org/#validate_by_input

这些链接也应该滚动你的页面到某些div（对吧？）。因此，只有在缩小浏览器窗口时才能看到效果。

Answer 3

如果没有正确绑定，您可以更改无法使用JavaScript的链接。

$('#content').tabs('select', index)

嵌套DIV标记的内部链接不起作用

3 个答案: