Как просмотреть скрытые <span>, выбрав ссылку ранее в документе? - PullRequest
Новая
       0

Как просмотреть скрытые <span>, выбрав ссылку ранее в документе?

0 голосов
/ 11 июня 2011

Я даже не знаю, правильно ли я это делаю, но я подумала, что попрошу получить лучшее мнение. По сути, я сделал следующее: создал панель информации / навигации, которая расширяется в зависимости от того, на какой вкладке нажал пользователь. Я пытаюсь добавить функциональность для расширения определенной вкладки и перенаправления на нее (например, то, что будет делать эта ссылка: <a href="#contactus">) на основе ссылки ранее на той же странице. Я не могу этого сделать. Вкладка, которая должна быть открыта, содержится в списке <ul><li> и скрыта. Я включу код: 

<div id="tab1"> 
<ul class="tablinks"> 
<li><span>Check-Out</span></li> 
<li><a onClick="show('tab2')">Payment</a></li>  
</ul> 
<table>
<tr>
    <td><img alt=Check-Out src="http://link.com/images/checkouticon.gif"     width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table>  
<div class="tabbase"></div> 
</div> 
<!-- tab 2 --> 
                        <div id="tab2"> 
<ul class="tablinks"> 
<li><a onClick="show('tab1')">Check-Out</a></li> 
<li><span>Payment</span></li>
</ul> 
<table>
<tr>
    <td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
    <td>
        <p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
    </td>
</tr>
</table> 
<div class="tabbase"></div> 
</div>

Это CSS, который влияет на это: 

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}

#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}

#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}

ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}

ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}

ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}

ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}

ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}

ul.tablinks li a:active{
text-decoration:underline;
}

div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}

div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}

И, наконец, что не менее важно, это код из внешнего файла .php, который влияет на скрытый аспект вкладок: 

function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
    //document.getElementById(id).style.display = "inline";
    document.getElementById(id).style.display = "block";
}
}

function hide(){
if(ie5 || ns6){
    document.getElementById('tab1').style.display = "none";
    document.getElementById('tab2').style.display = "none";
    document.getElementById('tab3').style.display = "none";
    document.getElementById('tab4').style.display = "none";
    document.getElementById('tab5').style.display = "none";
    document.getElementById('tab6').style.display = "none";
    document.getElementById('tab7').style.display = "none";
}
}

Таким образом, идея заключается в том, чтобы иметь возможность вставить ранее ссылку в документ, чтобы открыть вкладку «Оплата». Я попробовал что-то вроде этого: <a href="#payments">Payment Information</a> и изменил теги для списка на: <li><span name="payments">Payments</span></li>. Это не сработало, если я уже не нажал на вкладку «Платежи» и не открыл ее, а затем нажал на ссылку. Тогда мой экран будет прокручиваться вниз и фокусироваться на этой области. Можно ли прокрутить экран вниз и просмотреть <span>, не открывая его сначала?

Спасибо за всю вашу помощь заранее. И я должен отметить, что, хотя у меня есть кое-какие способности с HTML, Javascript и PHP, я все еще учусь и не знаю всех лучших способов ведения дел.

1 Ответ

1 голос
/ 11 июня 2011

Лучший (и самый простой) способ кодирования это использование JS-фреймворка, такого как jQuery. Это очень поможет в нормализации различий в браузере.

Но если это не вариант, давайте попробуем исправить существующий код. <a href="#payments">Payment Information</a> будет переходить к элементу с id="payments", а не name. Как только вы это исправите, добавьте onClick="show('tab2')" к этому <a>.

В функции show, какой смысл этого кода if(ie5 || ns6)? Это в основном говорит, что если это IE5 или Netscape6, то покажите элемент (при условии, что переменные ie5 и ns6 где-то установлены правильно, конечно). Попробуйте удалить это, я не думаю, что вам это нужно.

...