Форум Сайтостроение Веб-строительство

Java script - не получается изменить стиль - требуется помощь

C
На сайте с 19.02.2008
Offline
23
comerer
1868

Доброе утро!

У меня есть некий джава скрипт, который выполняет следующее действие:

при нажатии на линк - выезжает скрытый текст.

Замучился со стилями.

Создал отдельный стиль в css файле (скажем, назовем его "chiortov-stile") и нужно вывести его в этом джава скрипте.

Финальная цель: подчеркивание под линком должно быть не линией, а крупным пунктиром (dashed).

Я уже пытался и вписывать - class="chiortov-stile"

и пытался вручную, пример: style="border-bottom: 2px dashed red;

Но учитывая, что делаю это методом тыка, - результата нет ; (.


Вот скрипт:

<script language="javascript">
function hideandshow(obj)
{
obj.style.display=(obj.style.display==""?"none":"");
}
</script>

<a href="#" onclick="hideandshow(block)">А вы знали?</a>
<div id="block" style="display:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&#8213; Владимир Ильич Ленин считал, что сувать хер в живого человека &#8213; не человечно!</td>
</tr>
</table>
</div>

Вот стили в css файле:


.chiortov-stile a:link {text-decoration:dashed; color:#ebebeb;}
.chiortov-stile a:visited {text-decoration:none; color:#ebebeb;}
.chiortov-stile a:hover {text-decoration:none; color:#ebebeb;}
.chiortov-stile a:active {text-decoration:dashed; color:#ebebeb;}

Буду очень благодарен, если подскажите, как правильно сделать так, чтобы линк в джава скрипте был пунктиром (dashed), а не подчеркивался стандартной линией.

Заранее благодарен.

Turtle_Fly
На сайте с 20.09.2007
Offline
33
Turtle_Fly
#1 

<script language="javascript">

function hideandshow(obj)

{

obj.style.display=(obj.style.display==""?"none":"");

}

</script>

<style>

.a_dashed{

text-decoration: none;

border-bottom: 1px dashed;

}

</style>

<h3>Вар.1</h3>

<a href="#" onclick="hideandshow(block); this.style.borderBottom='1px, dashed'; this.style.textDecoration='none';">А вы знали?</a>

<div id="block" style="display:none">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>-- Владимир Ильич Ленин считал, что сувать хер в живого человека -- не человечно!</td>

</tr>

</table>

</div>

<h3>Вар.2</h3>

<a href="#" onclick="hideandshow(block1); this.className='a_dashed';">А вы знали?</a>

<div id="block1" style="display:none">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>-- Владимир Ильич Ленин считал, что сувать хер в живого человека -- не человечно!</td>

</tr>

</table>

</div>
лазерные станки для резки и гравировки, купить в Москве (http://laser911.ru/). изготовление табличек для офиса (http://www.shtampuem.ru/tablichki/).
C
На сайте с 19.02.2008
Offline
23
comerer
#2

Благодарю.

Только маленькая проблемка со стилями: дело в том, что почему-то желаемый пунктир (dashed) отображается только после того как я нажал на линк, а все то время пока линк не нажат, слово или предложение подчеркнуто обыной, стандартной линией.

Думал в начале, что стили страницы переписывают стили скрипта, то тогда взял и установил скрипт локально - тоже самое.

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

А как сделать так, чтобы изначально линк был подчеркнут пунктиром?

Заранее благодарен

savage
На сайте с 10.01.2007
Offline
224
savage
#3

<a href="#" onclick="hideandshow(block)" class="chiortov-stile">А вы знали?</a>

вообще с классами надо писать так (link можно упустить): 

a.chiortov-stile{border-bottom: 1px dashed red; text-decoration:none;}

a.chiortov-stile:hover{если нужно, чтобы при наведении что-то менялось}

- так работает

Купить / продать сайт ( https://www.telderi.ru/?pid=ca1f70 ) | Недорогой и надежный хостинг ( https://www.get-host.ru )
Turtle_Fly
На сайте с 20.09.2007
Offline
33
Turtle_Fly
#4 

<script language="javascript">
function hideandshow(obj)
{
obj.style.display=(obj.style.display==""?"none":"");
}
</script>
<style>
.a_dashed{
text-decoration: none;
border-bottom: 1px dashed;
}
.a_dashed:hover{
text-decoration: none;
border-bottom: 1px solid;
}
.a_clean{
text-decoration: none;
border-bottom: 0px;
}
</style>

<h3>Вар.3</h3>
<a href="#" class="a_dashed" onclick="hideandshow(block1); this.className='a_clean';">А вы знали?</a>
<div id="block1" style="display:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>При нажатии класс ссылки меняется на a_clean, по дефолту стоит пунктирное подчеркивание - класс a_dashed. Ну и при наведении на ссылку вместо пунктира появляется просто линия =) </td>
</tr>
</table>
</div>


<script language="javascript">
function hideandshow(obj)
{
obj.style.display=(obj.style.display==""?"none":"");
}
</script>
<style>
.a_dashed{
text-decoration: none;
border-bottom: 1px dashed;
}
.a_dashed:hover{
text-decoration: none;
border-bottom: 1px solid;
}
</style>

<h3>Вар.4</h3>
<a href="#" class="a_dashed" onclick="hideandshow(block1);">А вы знали?</a>
<div id="block1" style="display:none;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>По дефолту стоит пунктирное подчеркивание - класс a_dashed. Ну и при наведении на ссылку вместо пунктира появляется просто линия =) </td>
</tr>
</table>
</div>
C
На сайте с 19.02.2008
Offline
23
comerer
#5

О да!

Благодарю! ; ))

Только для легкости, вставил стили у себя в файле css ; )) и все класнно вышло - именно так как хотел!

Огроменное спасибо!

C
На сайте с 19.02.2008
Offline
23
comerer
#6

Интересно, а как именно похожий метод реализован на следующей странице: http://www.kitnpf.ru/how/

Там вроде не Java script, а что-то другое...

Может кто знает?

MVH
На сайте с 03.05.2005
Offline
64
MVH
#7
comerer:
Интересно, а как именно похожий метод реализован на следующей странице: http://www.kitnpf.ru/how/

Там вроде не Java script, а что-то другое...
Может кто знает?

Там JavaScript, просто действие прописано не напрямую в параметрах анкора, а через класс panel-switch привязывается:

http://www.kitnpf.ru/js/main.js

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий