Установка тд так, чтобы он связывался с javascript с помощью onclick

0

Вот мой 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, который делает первое изображение видимым, но не вторым, поскольку они накладываются. Кроме того, td не меняет цвет, хотя CSS должен делать его красным. То, что я думаю, происходит, это то, что все это происходит в таблице /td его части. Как я могу исправить это, чтобы все это работало? (Также, как настроить javascript для уменьшения z-индекса второго изображения, поэтому я могу использовать другую ссылку в таблице для создания своего рода слайд-шоу со ссылками для выбора изображения?)

  • 0
    Обратите внимание, что наиболее насущная проблема, которая может позволить мне самому что-то исправить, заключается в том, почему свойства # 1 в CSS не вызывают изменение цвета фона для ячейки таблицы?
Теги:

3 ответа

0
Лучший ответ

Было бы лучше указать id для ссылки, чем предоставить id для td

Также, как вы собираетесь сделать ссылку (тег), она будет автоматически иметь курсор: указатель css.

Было бы еще лучше использовать теги rel для связи ссылки и изображения

Я не мог правильно понять ваш вопрос. Однако я сделал JS FIDDLE. Надеюсь, это вам поможет. Поскольку вы использовали $ ("# 1"). 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');
});

Надеюсь, поможет

  • 0
    Отличный ответ, работает именно так, как я хочу в jsfiddle, однако (это будет звучать очень плохо), как я могу связать JavaScript как отдельный документ с HTML? Я попытался сохранить javascript как файл javascript, затем заменил hrefs на местоположение файла, но когда я его предварительно просматриваю и нажимаю на ссылки, он показывает код для него в браузере, а не просто показывает изображение.
1

Здесь у вас много проблем:

  1. 1 не является допустимым значением id HTML для многих браузеров. Требованиями HTML 4 для значений id являются:

    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 в конечном итоге позволит использовать значение, которое вы используете, но вы обнаружите, что многие браузеры не готовы полностью его поддерживать.

  2. У вас есть оба изображения: visibility: hidden; , но вы никогда не меняете это в своем JS. Ни один образ никогда не будет отображаться, пока вы не установите его visibility на visible, независимо от его значения z-index.

  3. В зависимости от операционной системы, в которой размещаются ваши активы, вы можете столкнуться с проблемами с вашими именами файлов ваших изображений с пробелами в них. Я бы порекомендовал не делать этого. , , например, использование и подчеркивание вместо пробелов.


ОБНОВИТЬ

На самом деле проблема с id начинающимся с цифры, по-видимому, связана с спецификациями CSS3 для действительных селекторов id, а не с поддержкой спецификации 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. ... 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. (выделено мной)

  • 1
    Спасибо, я не знал о проблеме с числами или пробелах, однако, веб-сайт выражений Microsoft, на котором я все это пишу, говорит, что я работаю в html5, а не в 4, хотя его изменение устранило проблемы.
  • 0
    В HTML5 следует помнить одну важную вещь: действительно важно то, что поддерживают браузеры. Вы можете написать совершенно правильный код HTML5, но если вы посмотрите его в IE7, у вас будут проблемы. :)
Показать ещё 1 комментарий
0

здесь рабочий пример, идентификатор элементов не должен начинаться с числа.

<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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню