Question

这是我的HTML：

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td id="1">
                <div>
                    <span>
                        Link 1
                    </span>
                </div>
            </td>
        </tr>
    </table>
</div>

<div id="box">
    <img src="iow panorama.png" id="one"/>
    <img src="iow panorama 2.png" id="two"/>
</div>

我的CSS：

#sidebar {
    display: inline-block;
    height: auto;
    width: auto;
    font-family: Garamond;
    font-size: large;
}

#table1 {
    border: 1px solid black;
    text-align: center;
}

#table1 th {
    border: 1px solid black;
}

#table1 td {
    border: 1px solid black;
}

#box {
    position: relative;
    height: 200px;
    width: 1200px;
}

#box #one,#two {
    position: absolute;
    top: 0px;
    left: 0px;
}

#one {
    visibility: hidden;
}

#two {
    visibility: hidden;
}

#1 {
    background-color:red;
    cursor: pointer;
}

和Javascript：

$("#1").click(function(){
    var z = parseInt($("#one").css("z-index"));
    z =+ 10;
    $("#one").css("z-index", z);
})

现在我想要发生的是将光标更改为td上的指针，当单击它时，它会触发javascript，使第一个图像可见，但不会覆盖第二个图像。此外，即使CSS应该使其变红，td也不会改变颜色。我认为正在发生的事情是整个事情在它的表/ td部分失败了。我该如何解决它以便所有这些工作？（另外，如何设置javascript以使第二个图像的z-index减少，所以我可以使用表中的另一个链接来创建一种幻灯片，带有选择图像的链接？）

Answer 1

你在这里遇到了多个问题：

1不是许多浏览器的有效HTML id值。 id值的HTML 4要求是：
```
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
colons (":"), and periods (".").
```
这是红色背景样式不适用于td的原因。 HTML5最终将允许您使用的值，但您会发现许多浏览器还没有准备好完全支持它。
您的图片都设置为visibility: hidden;，但您从未在JS中更改过。在您将visibility值设置为visible之前，不会显示任何图片，无论其z-index值是什么。
根据托管资产的操作系统，可能会遇到包含空格的图片文件名的问题。我建议不要这样做。。。例如，使用和下划线而不是空格。

<强>更新

实际上，id以数字开头的问题似乎与有效id选择器的CSS3规范相关联，而不是HTML规范支持。根据CSS3规范，选择器必须是“CSS标识符”，. . . can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they **cannot start with a digit**, two hyphens, or a hyphen followed by a digit.（强调添加）

Answer 2

为链接提供id比提供td

的id更好

另外，当您要创建链接（标记）时，它将自动拥有光标：指针css。

使用rel标签来关联链接和图像

会更好

我无法正确理解你的问题。但是我已经制作了一个JS FIDDLE。希望这对你有所帮助。由于您已经使用了$（＆＃34;＃1＆＃34;）。click（）我假设您已经使用过jQuery，我也在代码中使用了相同的内容。

JSFIDDLE

HTML

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a href="javascript:;" rel="img1">Link1</a>
            </td>
            <td>
                <a href="javascript:;" rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1"/>
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2"/>
</div>

JS

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

希望有所帮助

Answer 3

这是一个有效的例子，但是元素的id不应该以数字开头。

<div id="sidebar">
<table id="table1">
    <tr>
        <th>Table</th>
    </tr>
    <tr>
        <td id="d1">
            <div>
                <span>
                    Link 1
                </span>
            </div>
        </td>
    </tr>
</table>

$("#d1").click(function(){
    $("#one").css("visibility","visible");
})

jsfiddle demo

设置一个td，以便它与onclick链接到javascript

3 个答案: