Question

我的网站中间有一个i按钮。我要求你点击它 - 你会看到一个按钮 - contact。

当用户点击它时，我希望更改上面div的内容。

这是代码：

<section id="about" class="wrapper about accelerate hide">
            <div class="cell accelerate">
                <div class="cables center accelerate">
                    <div class="panel accelerate">
                        <header>
                        <h1>gog<em>sem</em>cel</h1>
                        </header>
                        <p><strong>gogsemcel </strong>is a trademark of <i font-family="Trebuchet MS">Company</i>.</p>
                        <p>This project is a collaboration between<br><a href="mailto:coming@soon.no" target="_blank">Company name</a> &amp; <a href="" target="_blank">gogsemcels</a>.</p>
                        <ul class="links">
                            <li><a class="download" href="info/info.html">More Info</a></li>
                            <li><a class="github" target="_blank" href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

按钮class为github。有什么建议吗？

非常感谢。

Answer 1

我看到你的页面上有jQuery，所以你可以使用它：

$('#about a.github').on('click', function(e){
    e.preventDefault();
    var content = $(this).closest('.panel').find('p');
    content[0].innerHTML = 'This is a new text!'
    content[1].innerHTML = 'This is the second line!'
});

Example

我不是禁用右键单击的粉丝。仅供参考我无论如何都可以看到整个内容...

如果你想用香草JS做，你可以使用它（积分Chris's nice function）：

function collectionHas(a, b) { //helper function (see below)
    for (var i = 0, len = a.length; i < len; i++) {
        if (a[i] == b) return true;
    }
    return false;
}

function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while (cur && !collectionHas(all, cur)) { //keep going up until you find a match
        cur = cur.parentNode; //go up
    }
    return cur; //will return null if not found
}
var git = document.querySelector('#about a.github');
git.addEventListener('click', function (e) {
    e.preventDefault();
    var content = findParentBySelector(git, '.panel').querySelectorAll('p');
    content[0].innerHTML = 'This is a new text!'
    content[1].innerHTML = 'This is the second line!'
});

Example

Answer 2

您应该将href属性添加到Contact链接。

<a class="github" target="_blank" href="#contact">Contact</a>

然后，将id属性添加到2个p元素，以便轻松选择。

<section id="about" class="wrapper about accelerate hide">
   <div class="cell accelerate">
      <div class="cables center accelerate">
         <div class="panel accelerate">
            <header>
               <h1>viva<em>stem</em>cell</h1>
            </header>
            <p id="abc"><strong>vivastemcell </strong>is a trademark of <i font-family="Trebuchet MS">Tsovn Tsirani Company</i>.</p>
            <p id="def">This project is a collaboration between<br><a href="mailto:coming@soon.no" target="_blank">Tsovn Tsirani</a> &amp; <a href="" target="_blank">vivastemcells</a>.</p>
            <ul class="links">
               <li><a class="download" href="info/info.html">More Info</a></li>
               <li><a class="github" target="_blank" href="contact.html">Contact</a></li>
            </ul>
         </div>
      </div>
   </div>
</section>

现在，在页面的onload事件中，添加以下代码。这使用你想要的纯Javascript。

// You can use document.querySelector -> returns the first element found.
var gh = document.querySelectorAll('#about .github')[0];

if (gh) {
    gh.addEventListener('click', function (e) {
        e.preventDefault();
        document.getElementById('abc').textContent = new Date().getTime();
        document.getElementById('def').textContent = new Date().getTime();
    })
}

通过单击按钮更改div内容 - 请不要使用jQuery

这是代码：

2 个答案:

Example

Example