堆栈内存溢出
  繁体   English   中英

如何正确编写通过onClick事件更改div文本的JavaScript代码

[英]How to correctly write a javascript code that change the text of a div via onClick event

 原文  2015-07-09 04:07:06  7   9    javascript/ html

问题描述

我是新来的JavaScript和我写一个简单的网站，我有改变div的内容，当用户单击任何菜单链接的问题。 到目前为止，我已经尝试了以下代码：

当用户单击菜单时，div文本内容将更改。 例如，当用户单击“ 新闻”菜单时， "<div class="paneltitle" id="contenttitle">Home</div>"应将内容从“ 首页 "<div class="paneltitle" id="contenttitle">Home</div>"更改为“ 新闻”

HTML 

 <div id="wrapper">
    <div id="content">
        <div class="menu">

<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
  <li><a href="#" onclick="changetitle_news()">News</a></li>
  <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
  <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
        </div>


        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
</div>


CSS 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 5px;
}

a {
    display: block;
    width: 60px;
    text-decoration: none;
}

.menu {
    float: left;
}

.body_content {
    float: left;
    height: 380px;
    background: red;
    width: 620px
}

.paneltitle {
    background: gray;
    width: 98.5%;
    padding: 5px;
}


JS 

function changetitle_home() {
document.getElementById("contenttitle").innerHTML = "Home";
}

function changetitle_news() {
document.getElementById("contenttitle").innerHTML = "News";
}

function changetitle_contact() {
document.getElementById("contenttitle").innerHTML = "Contact";
}

function changetitle_about() {
document.getElementById("contenttitle").innerHTML = "About Us";
}

在这里检查我的JSfiddle http://jsfiddle.net/453j50uL/1/

9 个解决方案

解决方案1
 1  2015-07-09 04:24:27

基于您的JSFiddle，您应该将jQuery 1.10.1下的Frameworks＆Extensions选项更改为No wrap - in <body> 。 现在应该可以使用了！

解决方案2
 1 已采纳  2015-07-09 04:25:47

将您发布的代码组合到页面中并加载到浏览器中时，效果很好。 将以下代码复制并保存为HTML文件，然后将其加载到浏览器中。 为了清楚起见，我删除了CSS，但可以放回去。 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function changetitle_home() {
            document.getElementById("contenttitle").innerHTML = "Home";
        }
        function changetitle_news() {
            document.getElementById("contenttitle").innerHTML = "News";
        }
        function changetitle_contact() {
            document.getElementById("contenttitle").innerHTML = "Contact";
        }
        function changetitle_about() {
            document.getElementById("contenttitle").innerHTML = "About Us";
        }
    </script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div class="menu">
            <ul>
                <li><a href="#" onclick="changetitle_home()">Home</a></li>
                <li><a href="#" onclick="changetitle_news()">News</a></li>
                <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
                <li><a href="#" onclick="changetitle_about()">About</a></li>
            </ul>   
        </div>

        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>

更好的方法是使用单个可重复使用的功能来设置标题，例如： 

function setPageTitle(title) {
    document.getElementById('contenttitle').innerHTML = title;
}

现在，在函数调用中，将所需的标题作为参数传递： 

<a href="#" onclick="javascript:setPageTitle('Home');">Home</a>

解决方案3
 1  2015-07-09 04:26:02

我没有足够的声誉来发表评论，所以它在答案栏中。 只需将函数复制到脚本块中，然后将其粘贴到上即可。 我试过了并且有效。 

<div id="wrapper">
<div id="content">
    <div class="menu">
        <script>    function changetitle_home() {
    document.getElementById("contenttitle").innerHTML = "Home";
}
function changetitle_news() {
    document.getElementById("contenttitle").innerHTML = "News";
}
function changetitle_contact() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
function changetitle_about() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}
        </script>            
<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
 <li><a href="#" onclick="changetitle_news()">News</a></li>
 <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
 <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
    </div>


    <div class="body_content">
        <div class="paneltitle" id="contenttitle">Home</div>
    </div>    
</div>

谢谢！

解决方案4
 1  2015-07-09 04:28:26

您的代码没有问题，应该可以正常工作。 脚本在小提琴中的放置只会导致问题。

我已经将脚本移到了HTML内容中，现在可以按预期工作。

检查此小提琴： Demo

解决方案5
 1  2015-07-09 04:43:02

您需要更改定义函数的方式。 如果您按以下方式定义它们，则它们将与窗口对象挂起，因此您可以从html中引用它们。 请查看以下jsfiddle的工作版本： https ://jsfiddle.net/3o3rk889/1/ 

changetitle_home = function() {
        document.getElementById("contenttitle").innerHTML = "Home";
}
changetitle_news = function(){ 
    document.getElementById("contenttitle").innerHTML = "News";
}
changetitle_contact = function() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
changetitle_about = function() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}

您定义它们的方式使它们毫无处理。 另外，最重要的提示：您可以将Dev工具与fiddler一起使用（chrome或IE中为F12），这将向您显示javascript中的任何错误。 对于单击按钮的那些功能，这样做会显示未定义的错误。

解决方案6
 1  2015-07-09 04:50:23

http://codepen.io/anon/pen/vOjNRw

我知道已经回答了这个问题，但是为了编写漂亮的javascript并保持HTML整洁（不使用onclick ），这是我的处理方法： 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

    var contentTitle = document.getElementById("contenttitle");
    var links = document.querySelectorAll("#navigation a");

    Array.prototype.forEach.call(links, function(link){
      link.addEventListener('click', function(e){
        contentTitle.innerHTML = e.target.innerHTML;
      }, false);
    });

</script>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div class="menu">
                <ul id="navigation">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>   
            </div>

        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>

解决方案7
 0  2015-07-09 04:12:53

对于所有链接，您可以使用如下所示的独特功能： 

var changeTitle = function(target){
   document.getElementById("contenttitle").innerHTML = target.innerHTML;
};

您的HTML菜单菜单如下所示 

<ul>
  <li><a href="#" onclick="changeTitle(this)">Home</a></li>
  <li><a href="#" onclick="changeTitle(this)">News</a></li>
  <li><a href="#" onclick="changeTitle(this)">Contact</a></li>
  <li><a href="#" onclick="changeTitle(this)">About</a></li>
</ul>

另一个选择肯定是使用jQuery： 

$('div.menu a').click(function(e){
    $('#contenttitle').text($(e.target).text());
});

解决方案8
 0  2015-07-09 04:21:38

只需更改您的脚本即可 

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }

});//]]>  

</script>

至： 

<script type="text/javascript">//<![CDATA[ 

    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }

//]]>  

</script>

解决方案9
 -2  2015-07-09 04:11:13

查看我的示例代码，然后您就会了解javascript onclick事件是如何发生的。

查看演示 

<ul>
    <li class="abc" data-id="abc1">Home</li>
    <li class="abc" data-id="abc2">about</li>
    <li class="abc" data-id="abc3">serive</li>
    <li class="abc" data-id="abc4">contact</li>
</ul>
<div class="mm" id="abc1">Home worlld</div>
<div class="mm" id="abc2">about worlld</div>
<div class="mm" id="abc3">Service worlld</div>
<div class="mm" id="abc4">Contact worlld</div>

$(document).ready(function(){
    $(".mm").hide();
    $("#abc1").show();
    $(".abc").click(function(){
          var mm = $(this).data("id");
            $(".mm").hide();
            $("#"+mm).show();
      });
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用JavaScript通过按钮onclick事件更改div HTML标签 JavaScript onclick事件以编写新的div 如何通过JavaScript动态添加HTML代码中的onclick事件？ 将Div文本代码内联添加到onclick事件 使用javascript使用动画更改文本onclick div 更改div的onClick事件 如何通过onclick事件更改div的属性？ javascript onclick 事件未正确触发 文本的Javascript onclick事件 Javascript onclick事件，每次单击时将不同的文本写入元素
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM