VPF::Не затрагивать рисуночек списка

komsomolec

Дата 30.7.2008, 15:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 22.11.2007

Репутация: нет
Всего: нет

Добрый день коллеги:

у меня есть списочек. слева каждого элемента рисуночек (минус). А возле той что нажали рисуночек плюс.
Сейчас работает что когда по этой картинке нажимаем она меняется (с минуса на плюс) ну и при нажатии на сам текст. А нужно чтоб только по тексту нажималось.

Код


<link href="styles.css" rel="stylesheet" type="text/css" />
<table class="main">
  <tr>
    <td class="left"> <h1>TXT</h1>
        <ul id="menu_ul">
            <li><a href="general.html" target="help">TXT1</a></li>
            <li><a href="btype.html" target="help">TXT2</a></li>
            <li><a href="htp.html" target="help">TXT3</a></li>
...

Код


...
var menu = document.getElementById('menu_ul');
var liArr = menu.getElementsByTagName('li');
...
for (var i = 0; i < liArr.length; i++)
    {
        var liEl = liArr[i];
        var aArr = liEl.getElementsByTagName('A');
        liEl.onclick = function (e) {
            clearClass();
            event.cancelBubble  = false;
            this.className = '';
            if ('undefined' != typeof(event))  {
                event.cancelBubble  = true;
                this.className = "selected";
            }

Код


...
table.main {
    width: 700px;
    height: 500px;
    margin: 0 auto 0 auto;
    border: 1px solid white;
    table-layout:fixed;
    text-align:left;
}
table.main tr td.left {
 width: 180px;
 background-color: #258E9B;
 color: #273021;
 vertical-align:top;
}
table.main tr td.left a {
    color: #FFFFFF;    
}
table.main tr td.left h1 { /* name game left*/
    color:#FFFFFF; /*#F3A82A;*/
    font-size:12pt;
    font-style: normal;
    font-weight: bold;


}
table.main tr td.left ul {
 list-style-type:disc;
 padding-left: 20px;
 margin: 5px;
}
table.main tr td.left ul li{
 padding-left: 5px;
 padding-top: 3px;
 list-style-image:url("contents/images/icoMinus.gif");
}
table.main tr td.left ul li.selected {
 list-style-image:url("contents/images/icoPluss.gif");
}
table.main tr td.left ul li{
 padding-left: 0px;
}
table.main tr td.left ul ul {
 list-style-type:square;
}
table.main tr td.left ul li ul li {
 padding: 0;
}
table.main tr td.right {
    width: auto;
    background-color: #909FA2;
    color: #909FA2;
    vertical-align:top;    
}
...

п.с. код не мой. изучаю css js совсем чуток...
Как заставить картинку не нажиматься?

bars80080

Дата 30.7.2008, 15:39 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

по-моему надо в этих стилях с padding поиграться
table.main tr td.left ul {}
table.main tr td.left ul li{ }
table.main tr td.left ul li.selected {}

вот что будет, если в table.main tr td.left ul {} padding-left: 20px; убрать? или изменить?

komsomolec

Дата 30.7.2008, 15:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 22.11.2007

Репутация: нет
Всего: нет

Цитата(bars80080 @ 30.7.2008, 15:39)

По изменял, по удалял: меняются расстояния, или по умолчанию.

Когда padding-left: 20px; убрал оно стало по совсем левому краю smile

минусики не нажимались smile

но надо же чтоб было на том же месте ) а... и еще когда по тексту жал... плюсиков не было smile

bars80080

Дата 30.7.2008, 16:19 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

а если вместо padding использовать margin?

конечно, это всё гадание на кофейной гуще

komsomolec

Дата 30.7.2008, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 22.11.2007

Репутация: нет
Всего: нет

меняется тока положение... и расстояния...

http://www.filehoster.ru/files/bh4359

вот моя проблемка

Это сообщение отредактировал(а) komsomolec - 30.7.2008, 16:40

komsomolec

Дата 30.7.2008, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 22.11.2007

Репутация: нет
Всего: нет

ПАМАГИТЕ!!!

Viroman

Дата 30.7.2008, 18:32 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 140
Регистрация: 28.7.2008

Репутация: нет
Всего: нет

Тебе надо онклик присвоить не LI элементу, а самому A элементу.
А потом надо не забыть, про это this.className, ибо больше не будет действительным и тебе надо на родителя ссылаться.

Добавлено @ 18:39
Ну в общем держи код.

Код


<script language="javascript" type="text/javascript">

function clearClass()
{
    var menu = document.getElementById('menu_ul');
    var liArr = menu.getElementsByTagName('LI');
    if ('undefined' != liArr && liArr.length > 0)
    {
        for (var i = 0; i < liArr.length; i++)
        {
            liArr[i].className='';
        }
    }
}

var menu = document.getElementById('menu_ul');
var liArr = menu.getElementsByTagName('LI');
if ('undefined' != liArr && liArr.length > 0)
{
    for (var i = 0; i < liArr.length; i++)
    {
        var liEl = liArr[i];
        var aArr = liEl.getElementsByTagName('A');
for(var o=0; o<aArr.length; o++) { 
        aArr[o].onclick = function (e) { 
            clearClass();
            if ('undefined' != typeof(event))  event.cancelBubble  = true;
            this.parentNode.className = "selected";
        }
        }
        
    }
}
</script>

Это сообщение отредактировал(а) Viroman - 30.7.2008, 18:40

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »